/* ======================================================================
   AIDA: DESIGN TOKENS  (theme: LUMEN only)

   Source of truth: Figma file "LUMEN WLP UI Kit" (key 1YdoEWFqGxFMp3O8IyGBSg),
   read on 2026-10-07. This file mirrors the Figma variables 1:1, LUMEN mode.
   If a value is wrong, fix it in Figma first, then regenerate this file.

   Same names and layout as kg-tokens.css (GoTriple KG Explorer), so the
   KG component styles can run on it. Only the values differ.

   Three layers, from basic to specific:
     1. Primitives        raw values            --color-primary-600, --spacing-4
     2. Semantic tokens   what a value is for   --button-primary, --content-01
     3. Device tokens     change by screen size --layout-gap, --size-body-base

   RULES FOR COMPONENT STYLES
     - Use semantic tokens first (--button-primary, not --color-primary-600).
     - Never type a hex value, px size or radius in a component. Use a token.

   NOTES
     - Only the LUMEN theme exists here. No theme switching, by design.
     - Names follow Figma, lower-case with dashes. Figma "Primary/Primary-600"
       is --color-primary-600. Figma "Buttons/button-primary" is --button-primary.
     - Figma collections read: Primitives (mode LUMEN), Colors (mode LUMEN),
       Color tokens (mode light), Device modes (Desktop, Tablet, Mobile).
   ====================================================================== */

:root {
  /* ---------- 1. PRIMITIVES: colors (Figma: Colors, LUMEN mode) ---------- */

  /* Basics */
  --color-white-100: #ffffff;
  --color-white-50: rgb(255 255 255 / 0.5);
  --color-white-25: rgb(255 255 255 / 0.25);
  --color-black-100: #000000;
  --color-black-transparency-50: rgb(0 0 0 / 0.5);
  --color-black-transparency-25: rgb(0 0 0 / 0.25);
  --color-brand-dark: #20544b;
  --color-brand-base: #75b6b2;
  --color-brand-light: #c9f0ee;
  --color-extra-01: #8b2663;
  --color-extra-01-transparency-10: rgb(139 38 99 / 0.1);
  --color-extra-02: #583f8a;
  --color-extra-02-transparency-10: rgb(88 63 138 / 0.1);
  --color-extra-03: #635002;
  --color-extra-03-transparency-10: rgb(99 80 2 / 0.1);
  --color-extra-04: #4a5252;
  --color-extra-04-transparency-10: rgb(74 82 82 / 0.1);
  --color-extra-05: #236166;
  --color-extra-05-transparency-10: rgb(35 97 102 / 0.1);

  /* Primary */
  --color-primary-50: #ebeff8;
  --color-primary-100: #d2d8e5;
  --color-primary-200: #aab6c6;
  --color-primary-300: #8191a9;
  --color-primary-400: #627591;
  --color-primary-500: #415779;
  --color-primary-600: #1c3358;
  --color-primary-700: #12223a;
  --color-primary-800: #0e192c;
  --color-primary-900: #09111d;

  /* Secondary */
  --color-secondary-50: #fef8f0;
  --color-secondary-100: #fff2e0;
  --color-secondary-200: #fbdaaa;
  --color-secondary-300: #f9c77f;
  --color-secondary-400: #f7b555;
  --color-secondary-500: #f39000;
  --color-secondary-600: #a26000;
  --color-secondary-700: #794800;
  --color-secondary-800: #281800;
  --color-secondary-900: #170e00;

  /* Neutral */
  --color-neutral-50: #f8f8f8;
  --color-neutral-100: #f2f2f2;
  --color-neutral-200: #d8d8d8;
  --color-neutral-300: #b1b1b1;
  --color-neutral-400: #9e9d9e;
  --color-neutral-500: #6b666b;
  --color-neutral-600: #4b474b;
  --color-neutral-700: #343234;
  --color-neutral-800: #1e1c1e;
  --color-neutral-900: #040204;

  /* Support */
  --color-success-dark: #0a4721;
  --color-success-medium: #22c55e;
  --color-success-light: #e0ffeb;
  --color-error-dark: #841010;
  --color-error-medium: #ef4444;
  --color-error-light: #ffefef;
  --color-warn-dark: #712106;
  --color-warn-medium: #f97316;
  --color-warn-light: #fff5e0;
  --color-info-dark: #06405f;
  --color-info-medium: #0ea5e9;
  --color-info-light: #e6f6ff;

  /* ---------- 1. PRIMITIVES: spacing (Figma: Primitives / Layout / Spacing) ---------- */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 24px;
  --spacing-6: 32px;
  --spacing-7: 40px;
  --spacing-8: 48px;
  --spacing-9: 56px;
  --spacing-10: 64px;
  --spacing-11: 72px;
  --spacing-12: 80px;

  /* ---------- 1. PRIMITIVES: corner radius ---------- */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 50px;

  /* ---------- 1. PRIMITIVES: font sizes (Figma: Core font sizes, LUMEN mode) ---------- */
  --text-xs: 13px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 36px;
  --text-4xl: 50px;
  --text-5xl: 56px;
  --text-6xl: 64px;

  /* ---------- 1. PRIMITIVES: type ---------- */
  --font-display: "Space Grotesk", sans-serif;   /* Figma Typeface/display */
  --font-text: "Roboto", sans-serif;             /* Figma Typeface/text */
  --font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Figma text style "Code snippet" */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --line-height-heading: 1.1;  /* Figma text styles H1 to H5 */
  --line-height-body: 1.5;     /* Figma text styles Body, Small, Large */
  --line-height-tight: 1;      /* Figma text styles Xsmall */
  --letter-spacing-xs: 0.02em; /* Figma text styles Xsmall (2%) */

  /* ---------- 1. PRIMITIVES: breakpoints (reference only; CSS cannot use variables in media queries) ---------- */
  --breakpoint-xs: 360px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  --breakpoint-3xl: 1920px;

  /* ---------- 2. SEMANTIC TOKENS (Figma: Color tokens, mode light) ---------- */

  /* Buttons */
  --button-primary: var(--color-primary-600);
  --button-primary-hover: var(--color-primary-700);
  --button-primary-clicked: var(--color-primary-900);
  --button-secondary: var(--color-secondary-400);
  --button-secondary-hover: var(--color-secondary-300);
  --button-secondary-clicked: var(--color-secondary-500);
  --button-disabled: var(--color-primary-100);
  --button-only-text: var(--color-primary-600);
  --button-only-text-hover: var(--color-primary-700);
  --button-only-text-active: var(--color-primary-900);

  /* Content */
  --content-01: var(--color-neutral-900);
  --content-02: var(--color-neutral-800);
  --content-03: var(--color-neutral-700);
  --content-04: var(--color-neutral-500);
  --content-placeholder: var(--color-neutral-500);
  --content-inverse: var(--color-neutral-50);
  --content-disabled: var(--color-neutral-400);
  --content-primary: var(--color-primary-600);
  --content-error: var(--color-error-dark);
  --content-warn: var(--color-warn-dark);
  --content-success: var(--color-success-dark);
  --content-info: var(--color-info-dark);

  /* Link */
  --link-primary: var(--color-primary-600);
  --link-visited: var(--color-primary-900);
  --link-inverse: var(--color-primary-100);
  --link-primary-hover: var(--color-primary-700);
  --link-inverse-hover: var(--color-primary-200);
  --link-inverse-visited: var(--color-primary-100);

  /* Background */
  --background-gray-01: var(--color-neutral-50);
  --background-gray-02: var(--color-neutral-100);
  --background-gray-03: var(--color-neutral-300);
  --background-gray-04: var(--color-neutral-400);
  --background-gray-05: var(--color-neutral-700);
  --background-gray-06: var(--color-neutral-800);
  --background-gray-07: var(--color-neutral-900);
  --background-primary: var(--color-primary-600);
  --background-primary-light: var(--color-primary-50);
  --background-brand-dark: var(--color-brand-dark);
  --background-brand-light: var(--color-brand-light);

  /* Border */
  --border-gray-01: var(--color-neutral-200);
  --border-gray-02: var(--color-primary-100);
  --border-gray-03: var(--color-neutral-400);
  --border-gray-04: var(--color-neutral-700);
  --border-primary: var(--color-primary-600);
  --border-secondary: var(--color-secondary-500);

  /* Tag */
  --type-01-content: var(--color-extra-01);
  --type-01-border: var(--color-extra-01-transparency-10);
  --type-01-background: var(--color-extra-01-transparency-10);
  --type-02-content: var(--color-extra-02);
  --type-02-border: var(--color-extra-02-transparency-10);
  --type-02-background: var(--color-extra-02-transparency-10);
  --type-03-content: var(--color-extra-03);
  --type-03-border: var(--color-extra-03-transparency-10);
  --type-03-background: var(--color-extra-03-transparency-10);
  --type-04-content: var(--color-extra-04);
  --type-04-border: var(--color-extra-04-transparency-10);
  --type-04-background: var(--color-extra-04-transparency-10);
  --type-05-content: var(--color-extra-05);
  --type-05-border: var(--color-extra-05-transparency-10);
  --type-05-background: var(--color-extra-05-transparency-10);
  --type-collab-background: var(--color-brand-light);

  /* Focus. Black, by decision (same as the KG Explorer).
     Figma Focus/Focus still reads #879afe: update it in Figma to match. */
  --focus: var(--color-black-100);
  --inner-focus: var(--color-white-100);

  /* Support */
  --info: var(--color-info-medium);
  --info-light: var(--color-info-light);
  --success: var(--color-success-medium);
  --success-light: var(--color-success-light);
  --warn: var(--color-warn-medium);
  --warn-light: var(--color-warn-light);
  --error: var(--color-error-medium);
  --error-light: var(--color-error-light);

  /* Overlays - backdrop */
  --overlay-black-50: var(--color-black-transparency-50);
  --overlay-black-25: var(--color-black-transparency-25);
  --overlay-white-50: var(--color-white-50);
  --overlay-white-25: var(--color-white-25);

  /* ---------- 3. DEVICE TOKENS: Desktop (default). Figma: Device modes ---------- */
  --layout-columns: 12;
  --layout-margin-sm: 40px;
  --layout-margin-base: 64px;
  --layout-margin-lg: 183px;
  --layout-margin-lg-inner: 119px;
  --layout-gap: 24px;
  --layout-content-max-sm: 573px;
  --layout-content-max-base: 692px;
  --layout-content-max-lg: 811px;
  --layout-content-max-xl: 931px;
  --layout-utility: 144px;
  --layout-spacing-none: var(--spacing-0);
  --layout-spacing-xs: var(--spacing-1);
  --layout-spacing-sm: var(--spacing-2);
  --layout-spacing-md: var(--spacing-4);
  --layout-spacing-lg: var(--spacing-5);
  --layout-spacing-xl: var(--spacing-6);
  --layout-spacing-2xl: var(--spacing-7);
  --layout-spacing-3xl: var(--spacing-8);
  --layout-spacing-4xl: var(--spacing-9);
  --layout-spacing-5xl: var(--spacing-10);
  --layout-spacing-6xl: var(--spacing-12);
  --size-display-h1: var(--text-4xl);
  --size-display-h2: var(--text-3xl);
  --size-title-h1: var(--text-3xl);
  --size-title-h2: var(--text-2xl);
  --size-title-h3: var(--text-xl);
  --size-title-h4: var(--text-lg);
  --size-body-lg: var(--text-xl);
  --size-body-base: var(--text-md);
  --size-body-sm: var(--text-sm);
  --size-body-xs: var(--text-xs);
}

/* Tablet. ASSUMPTION: Figma gives frame widths, not thresholds, so these
   ranges match the Figma breakpoints (md 768, xl 1280). Same as the KG. */
@media (max-width: 1279px) {
  :root {
    --layout-margin-sm: 24px;
    --layout-margin-base: 32px;
    --layout-margin-lg: 114px;
    --layout-margin-lg-inner: 82px;
    --layout-content-max-sm: 550px;
    --layout-content-max-base: 632px;
    --layout-content-max-lg: 714px;
    --layout-content-max-xl: 796px;
    --layout-utility: 24px;
    --layout-spacing-6xl: var(--spacing-11);
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --layout-columns: 2;
    --layout-margin-sm: 16px;
    --layout-margin-base: 16px;
    --layout-margin-lg: 16px;
    --layout-margin-lg-inner: 0px;
    --layout-gap: 16px;
    --layout-content-max-sm: 448px;
    --layout-content-max-base: 448px;
    --layout-content-max-lg: 448px;
    --layout-content-max-xl: 448px;
    --layout-utility: 16px;
    --layout-spacing-md: var(--spacing-3);
    --layout-spacing-lg: var(--spacing-4);
    --layout-spacing-xl: var(--spacing-5);
    --layout-spacing-2xl: var(--spacing-6);
    --layout-spacing-3xl: var(--spacing-7);
    --layout-spacing-4xl: var(--spacing-7);
    --layout-spacing-5xl: var(--spacing-8);
    --layout-spacing-6xl: var(--spacing-9);
    --size-display-h1: var(--text-3xl);
    --size-display-h2: var(--text-2xl);
    --size-title-h1: var(--text-2xl);
    --size-title-h2: var(--text-xl);
    --size-title-h3: var(--text-lg);
    --size-title-h4: var(--text-md);
    --size-body-lg: var(--text-lg);
    --size-body-base: var(--text-sm);
    --size-body-sm: var(--text-xs);
  }
}

/* ======================================================================
   TEXT STYLES (Figma, LUMEN). Reference for the component styles.
   Sizes are device tokens, so they shrink on tablet and mobile on their own.
   display = Space Grotesk, text = Roboto.

   Figma style                  font     weight          size token          line height
   H1-Title 1                   display  bold            --size-display-h1   heading (1.1)
   H1-Title 2                   display  bold            --size-title-h1     heading
   H2-Title 1                   display  bold            --size-display-h2   heading
   H2-Title 2                   display  bold            --size-title-h2     heading
   H3                           display  bold            --size-title-h3     heading
   H4 (+ underline)             display  bold *          --size-title-h4     heading
   H5                           display  medium          --size-body-base    heading
   Item preview title           display  medium *        --size-title-h3     heading
   Large text (+ underline)     text     regular         --size-body-lg      body (1.5)
   Body text (+ underline)      text     regular         --size-body-base    body
   Body text bold (+ underline) text     semibold        --size-body-base    body
   Small text (+ underline)     text     regular         --size-body-sm      body
   Small text bold              text     semibold        --size-body-sm      body
   Xsmall text italic / medium  text     italic / medium --size-body-xs      tight (1), letter spacing 2%
   Xsmall text medium uppercase text     medium          --size-body-xs      tight, 2%, uppercase
   Small button text            text     semibold        --size-body-xs      normal
   Medium button text           text     semibold        --size-body-base    normal
   Large button text            text     semibold        --size-title-h4     normal
   Header nav text              text     semibold        --size-body-base    normal
   Code snippet                 mono     regular         --size-body-xs      body

   * Figma mismatch: the style uses one weight, its weight variable says another.
     H4: style Bold, variable Semibold. Item preview title: style Medium, variable
     Semibold (its underline version is Bold). The style's own weight is used here.
   Not included: Dataviz indicator, Dataviz indicator big (not needed for AIDA),
   "_utilities / Info text" (Poppins, a Figma utility style).
   ====================================================================== */