/* 
  tokens.css 
  Centralized design system variables for Strok platform.
*/

@font-face {
  font-family: 'Gotham Pro';
  src: url('/assets/fonts/GothamPro-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham Pro';
  src: url('/assets/fonts/GothamPro.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham Pro';
  src: url('/assets/fonts/GothamPro-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham Pro';
  src: url('/assets/fonts/GothamPro-Bold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham Pro';
  src: url('/assets/fonts/GothamPro-Black.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

/* Explicit mappings for GothamPro and GothamPro-Medium as requested by user typography rules */
@font-face {
  font-family: 'GothamPro';
  src: url('/assets/fonts/GothamPro.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'GothamPro-Medium';
  src: url('/assets/fonts/GothamPro-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

:root {
  /* Official Strok Color Palette */
  --brand-primary: #006BDC;         /* Primary Blue */
  --brand-primary-hover: #0052cc;
  --brand-navy: #111236;            /* Dark Navy */
  
  --color-success: #00A73C;         /* Green Success */
  --color-success-hover: #008f33;
  --color-danger: #BB002E;          /* Red Destructive */
  --color-danger-hover: #a00027;
  --color-warning: #FAC126;         /* Yellow Warning */
  
  /* Neutral Grays */
  --text-primary: #12151A;          /* Text Primary */
  --text-secondary: #333F4A;        /* Text Secondary */
  --text-muted: #667085;            /* Text Muted */
  --text-placeholder: #8F9AA5;      /* Text Placeholder */
  
  --border-subtle: #E4E5E9;         /* Borders */
  --border-focus: #006BDC;
  
  --bg-app: #F5F7FB;                /* Backgrounds */
  --bg-card: #ffffff;
  --bg-hover: rgba(0, 107, 220, 0.04);
  --bg-active: rgba(0, 107, 220, 0.1);
  
  /* Dark Sidebar Specific Variables (Isolated) */
  --sidebar-bg: #111236;
  --sidebar-text: #C4C8CD;
  --sidebar-border: rgba(255, 255, 255, 0.06);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.04);
  --sidebar-active-bg: rgba(0, 107, 220, 0.1);
  --sidebar-active-text: #006BDC;

  /* Typography Scale */
  --font-family: 'Gotham Pro', 'Inter', system-ui, -apple-system, sans-serif;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Sizing */
  --sidebar-width: 240px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* Shadows (Subtle, Enterprise) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  
  /* Z-Index Scale */
  --z-overlay: 1000;
  --z-modal: 2000;
  --z-toast: 3000;
}