/* css/tokens.css — CZP Web Design System tokens */

/* ─── PRIMITIVE COLOR PALETTE ─── */
:root {
  /* Primary */
  --primary-0: #00291b;
  --primary-10: #003d28;
  --primary-20: #006643;
  --primary-30-base: #008858;
  --primary-40: #00b274;
  --primary-50: #34c57e;
  --primary-60: #5ed49a;
  --primary-70: #5ed49a;
  --primary-80: #8de3b8;
  --primary-90: #adebd2;
  --primary-95: #ebfaf4;
  --primary-99: #f6fffb;
  --primary-100: #ffffff;

  /* Secondary */
  --secondary-0: #0e1c34;
  --secondary-10: #142748;
  --secondary-20: #1f3c70;
  --secondary-30: #274b8c;
  --secondary-40-main: #325fb4;
  --secondary-50: #396bc8;
  --secondary-60: #5f88d3;
  --secondary-70: #87a5de;
  --secondary-80: #c3d2ee;
  --secondary-90: #dfe7f6;
  --secondary-95: #eff3fa;
  --secondary-99: #f7f9fd;
  --secondary-100: #ffffff;

  /* Neutral */
  --neutral-0: #000000;
  --neutral-5: #0b0b0c;
  --neutral-10: #151618;
  --neutral-15: #1d1f21;
  --neutral-20: #25272a;
  --neutral-25: #2a2d31;
  --neutral-30: #2f3337;
  --neutral-40: #373c41;
  --neutral-50: #3d4349;
  --neutral-60: #62676c;
  --neutral-70: #8b9094;
  --neutral-80: #b4b8bb;
  --neutral-90: #dde0e2;
  --neutral-92: #e4e6e8;
  --neutral-94: #ebecee;
  --neutral-96: #f1f3f3;
  --neutral-98: #f8f9f9;
  --neutral-100: #ffffff;

  /* Danger */
  --danger-20: #912018;
  --danger-30: #b42318;
  --danger-40: #d92d20;
  --danger-50: #f04438;
  --danger-60: #f97066;
  --danger-80: #fecdca;
  --danger-90: #fee4e2;
  --danger-95: #fef3f2;
  --danger-99: #fffbfa;
  --danger-100: #ffffff;

  /* Positive / Success */
  --positive-10: #074d31;
  --positive-20: #085d3a;
  --positive-30: #067647;
  --positive-40: #079455;
  --positive-50: #17b26a;
  --positive-60: #47cd89;
  --positive-80: #a9efc5;
  --positive-90: #dcfae6;
  --positive-95: #ecfdf3;
  --positive-99: #f6fef9;

  /* Warning */
  --warning-20: #93370d;
  --warning-30: #b54708;
  --warning-40: #dc6803;
  --warning-50: #f79009;
  --warning-60: #fdb022;
  --warning-80: #fedf89;
  --warning-90: #fef0c7;
  --warning-95: #fffaeb;
  --warning-99: #fffcf5;

  /* Info */
  --info-30: #026aa2;
  --info-40: #0086c9;
  --info-50: #0ba5ec;
  --info-60: #36bffa;
  --info-90: #addfff;
  --info-95: #f0f9ff;
  --info-99: #f5fbff;
}

/* ─── SEMANTIC TOKENS ─── */
:root {
  /* Backgrounds */
  --background-primary-dark: var(--primary-30-base);
  --background-primary-darker: var(--primary-20);
  --background-primary-medium: var(--primary-40);
  --background-primary-light: var(--primary-90);
  --background-primary-lighter: var(--primary-95);
  --background-secondary-dark: var(--secondary-30);
  --background-secondary-medium: var(--secondary-40-main);
  --background-secondary-light: var(--secondary-90);
  --background-secondary-lighter: var(--secondary-95);
  --background-neutral-lighter: var(--neutral-100);
  --background-neutral-light: var(--neutral-98);
  --background-neutral-medium: var(--neutral-96);
  --background-neutral-dark: var(--neutral-94);
  --background-neutral-darkest: var(--neutral-92);
  --background-negative-light: var(--danger-95);
  --background-negative-lighter: var(--danger-99);
  --background-negative-medium: var(--danger-50);
  --background-positive-light: var(--positive-95);
  --background-positive-lighter: var(--positive-99);
  --background-positive-medium: var(--positive-50);
  --background-warning-light: var(--warning-95);
  --background-warning-medium: var(--warning-50);
  --background-info-light: var(--info-95);
  --background-info-medium: var(--info-50);

  /* Canvas */
  --canvas-default: var(--neutral-98);
  --canvas-white: var(--neutral-100);

  /* Foreground / Text */
  --foreground-neutral-default: var(--neutral-20);
  --foreground-neutral-light: var(--neutral-40);
  --foreground-neutral-lighter: var(--neutral-60);
  --foreground-neutral-lightest: var(--neutral-80);
  --foreground-primary-default: var(--primary-30-base);
  --foreground-primary-dark: var(--primary-20);
  --foreground-negative-default: var(--danger-40);
  --foreground-negative-dark: var(--danger-20);
  --foreground-positive-default: var(--positive-50);
  --foreground-positive-dark: var(--positive-30);
  --foreground-warning-dark: var(--warning-30);
  --foreground-secondary-default: var(--secondary-40-main);

  /* Strokes / Borders */
  --stroke-neutral-default: var(--neutral-90);
  --stroke-neutral-light: var(--neutral-94);
  --stroke-primary-default: var(--primary-40);
  --stroke-negative-default: var(--danger-40);
  --stroke-positive-default: var(--positive-50);
  --stroke-warning-default: var(--warning-60);
  --stroke-info-default: var(--info-50);

  /* Buttons */
  --button-background-primary-solid: var(--primary-30-base);
  --button-foreground-primary-on-solid: var(--primary-100);
  --button-background-negative-solid: var(--danger-40);
  --button-background-disabled: var(--neutral-94);
  --button-foreground-disabled: var(--neutral-70);
  --button-background-secondary-subtle: var(--secondary-90);
  --button-foreground-secondary-on-subtle: var(--secondary-40-main);
  --button-background-positive-subtle: var(--positive-90);

  /* Navigation */
  --navigation-background-default: var(--neutral-100);
  --navigation-background-selected: var(--primary-30-base);
  --navigation-background-selected-subtle: var(--primary-95);
  --navigation-foreground-default: var(--neutral-60);
  --navigation-foreground-selected: var(--primary-30-base);
  --navigation-foreground-selected-alt: var(--primary-100);
  --navigation-stroke-default: var(--neutral-90);
  --navigation-stroke-selected: var(--primary-30-base);

  /* States */
  --state-neutral-light: #1516180d;
  --state-neutral-dark: #1516181a;
  --state-primary-light: #00b2740d;
  --state-primary-dark: #00b2741a;
}

/* ─── TYPOGRAPHY TOKENS ─── */
:root {
  --font-family-base: 'Anuphan', sans-serif;

  --font-size-label-s: 11px;
  --font-size-body-s: 12px;
  --font-size-label-m: 12px;
  --font-size-title-s: 14px;
  --font-size-body-m: 14px;
  --font-size-label-l: 14px;
  --font-size-title-m: 16px;
  --font-size-body-l: 16px;
  --font-size-label-xl: 16px;
  --font-size-title-l: 18px;
  --font-size-headline-s: 24px;
  --font-size-headline-m: 28px;
  --font-size-headline-l: 32px;
  --font-size-display-s: 36px;
  --font-size-display-m: 46px;
  --font-size-display-l: 57px;

  --line-height-label-s: 16px;
  --line-height-body-s: 16px;
  --line-height-label-m: 18px;
  --line-height-title-s: 20px;
  --line-height-body-m: 20px;
  --line-height-label-l: 21px;
  --line-height-title-m: 24px;
  --line-height-body-l: 24px;
  --line-height-label-xl: 24px;
  --line-height-title-l: 26px;
  --line-height-headline-s: 32px;
  --line-height-headline-m: 36px;
  --line-height-headline-l: 40px;
  --line-height-display-s: 44px;
  --line-height-display-m: 52px;
  --line-height-display-l: 64px;

  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
}

/* ─── SPACING TOKENS ─── */
:root {
  --spacing-none: 0px;
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-2xl: 20px;
  --spacing-3xl: 24px;
  --spacing-4xl: 32px;
  --spacing-5xl: 40px;
  --spacing-6xl: 48px;
  --spacing-7xl: 64px;
  --spacing-8xl: 80px;
  --spacing-9xl: 96px;
  --spacing-10xl: 128px;
}

/* ─── RADIUS TOKENS ─── */
:root {
  --radius-none: 0px;
  --radius-xxs: 2px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-4xl: 24px;
  --radius-full: 1000px;
}

/* ─── SHADOW TOKENS ─── */
:root {
  --shadow-custom: 0 4px 6px -1px rgba(62, 67, 76, 0.05);
  --shadow-custom-lg: 0 10px 15px -3px rgba(62, 67, 76, 0.1),
                      0 4px 6px -2px rgba(62, 67, 76, 0.05);
  --shadow-custom-xl: 0 20px 25px -5px rgba(62, 67, 76, 0.1),
                      0 10px 10px -5px rgba(62, 67, 76, 0.04);
}

/* ─── CHART COLOR TOKENS ─── */
:root {
  --chart-1: #00b274;
  --chart-2: #df1278;
  --chart-3: #3b82f6;
  --chart-4: #f59e0b;
  --chart-5: #8b5cf6;
}