/* ============================================
   Design Tokens
   Colors, Typography, Spacing, Shadows, Radii
   ============================================ */

/* ============================================
   FONTS
   ============================================ */
@font-face {
  font-family: 'Trade Gothic Next';
  src: url('/fonts/TradeGothicNextLTPro-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Trade Gothic Next';
  src: url('/fonts/TradeGothicNextLTPro-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Trade Gothic Next';
  src: url('/fonts/TradeGothicNextLTPro-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Trade Gothic Next';
  src: url('/fonts/TradeGothicNextLTPro-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Trade Gothic Next';
  src: url('/fonts/TradeGothicNextLTPro-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Trade Gothic Next';
  src: url('/fonts/TradeGothicNextLTPro-Heavy.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Pro Display';
  src: url('/fonts/SFProDisplay-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('/fonts/SFProDisplay-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('/fonts/SFProDisplay-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('/fonts/SFProDisplay-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('/fonts/SFProDisplay-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   LIGHT MODE TOKENS (default)
   ============================================ */
:root {
  /* --- Brand: Lima (primary) --- */
  --lima:     #FAFC59;
  --lima-50:  #FEFEE0;
  --lima-100: #FDFDB3;
  --lima-200: #FCFD8A;
  --lima-300: #FAFC59;
  --lima-400: #E8EA40;
  --lima-500: #D4D62A;
  --lima-600: #B5B71A;
  --lima-700: #8E900F;
  --lima-800: #656708;
  --lima-900: #3D3E03;

  /* --- Brand: Cereja (negatives only) --- */
  --cereja:     #E8285F;
  --cereja-50:  #FDE8EF;
  --cereja-100: #F9C5D4;
  --cereja-200: #F49DB6;
  --cereja-300: #EE7097;
  --cereja-400: #E8285F;
  --cereja-500: #D01E50;
  --cereja-600: #B01843;
  --cereja-700: #8C1235;
  --cereja-800: #660D27;
  --cereja-900: #40081A;

  /* --- Neutrals --- */
  --white:    #FFFFFF;
  --gray-25:  #FCFCFD;
  --gray-50:  #F9FAFB;
  --gray-100: #F2F4F7;
  --gray-200: #EAECF0;
  --gray-300: #D0D5DD;
  --gray-400: #98A2B3;
  --gray-500: #667085;
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-800: #1D2939;
  --gray-900: #101828;

  /* --- Semantic --- */
  --success: #12B76A;
  --success-light: #ECFDF3;
  --warning: #F79009;
  --warning-light: #FFFAEB;
  --info: #528BFF;
  --info-light: #EFF4FF;
  --danger: var(--cereja);
  --danger-light: var(--cereja-50);

  /* --- Surfaces (Light) --- */
  --bg-primary: #F7F7F2;       /* warm off-white canvas */
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F2F4F7;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FAFAF5;
  --bg-sidebar: #FFFFFF;
  --bg-highlight: var(--lima);
  --bg-highlight-subtle: var(--lima-50);
  --bg-negative: var(--cereja-50);

  /* --- Text (Light) --- */
  --fg1: #101828;              /* primary */
  --fg2: #475467;              /* secondary */
  --fg3: #667085;              /* tertiary */
  --fg-disabled: #98A2B3;
  --text-primary: #101828;
  --text-secondary: #475467;
  --text-tertiary: #667085;
  --text-disabled: #98A2B3;
  --text-on-lima: #1D2939;
  --text-on-dark: #FFFFFF;
  --text-negative: var(--cereja);
  --text-positive: var(--success);

  /* --- Borders (Light) --- */
  --border-primary: #EAECF0;
  --border-secondary: #D0D5DD;
  --border-focus: var(--lima-400);

  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  --shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
  --shadow-card: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-card-hover: 0 4px 12px rgba(16, 24, 40, 0.08);

  /* --- Spacing (8pt grid) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* --- Radius --- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* --- Typography families --- */
  --font-heading: 'Trade Gothic Next', 'Barlow Condensed', sans-serif;
  --font-body:    'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  --font-mono:    'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;

  /* --- Type scale --- */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.25rem;    /* 20 */
  --text-2xl:  1.5rem;     /* 24 */
  --text-3xl:  1.875rem;   /* 30 */
  --text-4xl:  2.25rem;    /* 36 */
  --text-5xl:  3rem;       /* 48 */
  --text-6xl:  3.75rem;    /* 60 */

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;

  /* --- Motion --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* --- Charts --- */
  --chart-1: var(--lima-300);
  --chart-2: var(--lima-500);
  --chart-3: var(--gray-400);
  --chart-4: var(--gray-300);
  --chart-5: var(--lima-700);
  --chart-negative: var(--cereja);
  --chart-positive: var(--success);
  --chart-grid: var(--gray-200);
  --chart-label: var(--gray-500);
}

/* ============================================
   DARK MODE TOKENS
   ============================================ */
[data-theme="dark"] {
  --bg-primary:   #0C0D0F;
  --bg-secondary: #161719;
  --bg-tertiary:  #1E2023;
  --bg-card:      #1A1B1E;
  --bg-card-hover:#222326;
  --bg-sidebar:   #111214;
  --bg-highlight: var(--lima-400);
  --bg-highlight-subtle: rgba(250, 252, 89, 0.08);
  --bg-negative:  rgba(232, 40, 95, 0.10);

  --fg1: #F5F5F5;
  --fg2: #A0A4AB;
  --fg3: #6B7280;
  --fg-disabled: #4B5563;
  --text-primary:   #F5F5F5;
  --text-secondary: #A0A4AB;
  --text-tertiary:  #6B7280;
  --text-disabled:  #4B5563;
  --text-on-lima:   #101828;
  --text-negative:  #F4758E;
  --text-positive:  #4ADE80;

  --border-primary:   #2A2C30;
  --border-secondary: #3A3C42;
  --border-focus:     var(--lima-300);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 8px -2px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 16px -4px rgba(0,0,0,0.4), 0 4px 6px -2px rgba(0,0,0,0.3);
  --shadow-xl: 0 20px 24px -4px rgba(0,0,0,0.4), 0 8px 8px -4px rgba(0,0,0,0.3);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.03);
  --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.4);

  --chart-grid: #2A2C30;
  --chart-label: #6B7280;
  --success-light: rgba(18, 183, 106, 0.10);
  --warning-light: rgba(247, 144, 9, 0.10);
  --info-light:    rgba(82, 139, 255, 0.10);
}

/* ============================================
   SEMANTIC TYPE (utility classes)
   ============================================ */
html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-body);
  color: var(--fg1);
  background: var(--bg-primary);
  line-height: var(--leading-normal);
}

.display {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
h1, .h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
h2, .h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
h3, .h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
}
h4, .h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg3);
}
.body-lg { font-size: var(--text-lg); }
p, .body { font-size: var(--text-base); color: var(--fg2); }
.body-sm { font-size: var(--text-sm); color: var(--fg2); }
.caption { font-size: var(--text-xs); color: var(--fg3); }
.metric {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}
.mono, code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}