/* ======================================================================
   KG EXPLORER: DESIGN TOKENS  (theme: SSH only)

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

   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 SSH 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.
     - --color-primary-600 is dark purple (#361035) in this file. It is NOT the
       navy (#1c3358) used in GoTriple's front end, which is the LUMEN value.
   ====================================================================== */

:root {
  /* ---------- 1. PRIMITIVES: colors (Figma: Colors, SSH 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: #521950;
  --color-brand-base: #682966;
  --color-brand-light: #79ebca;
  --color-accent: #155cae;
  --color-extra-01: #c1433e;
  --color-extra-01-transparency-10: rgb(193 67 62 / 0.1);
  --color-extra-02: #6a5ac4;
  --color-extra-02-transparency-10: rgb(106 90 196 / 0.1);
  --color-extra-03: #7f3f7d;
  --color-extra-03-transparency-10: rgb(127 63 125 / 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: #f5f2f5;
  --color-primary-100: #e2d8e1;
  --color-primary-200: #c5b2c4;
  --color-primary-300: #8b658a;
  --color-primary-400: #6e3f6d;
  --color-primary-500: #521950;
  --color-primary-600: #361035;
  --color-primary-700: #290c28;
  --color-primary-800: #0d040d;
  --color-primary-900: #070207;

  /* Secondary */
  --color-secondary-50: #fef9f2;
  --color-secondary-100: #feefd9;
  --color-secondary-200: #fedfb4;
  --color-secondary-300: #fdcf8e;
  --color-secondary-400: #ffad39;
  --color-secondary-500: #fca01e;
  --color-secondary-600: #a7670c;
  --color-secondary-700: #6e4409;
  --color-secondary-800: #2a1a05;
  --color-secondary-900: #180f02;

  /* Neutral */
  --color-neutral-50: #f7f7fb;
  --color-neutral-100: #ececf4;
  --color-neutral-200: #d7d7e4;
  --color-neutral-300: #babac5;
  --color-neutral-400: #878492;
  --color-neutral-500: #6a5f71;
  --color-neutral-600: #4c4552;
  --color-neutral-700: #342b37;
  --color-neutral-800: #1f1722;
  --color-neutral-900: #1f0a1d;

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

  /* ---------- 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 (SSH values, deliberate) ---------- */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 19px;
  --text-2xl: 23px;
  --text-3xl: 37px;
  --text-4xl: 49px;
  --text-5xl: 55px;
  --text-6xl: 63px;

  /* ---------- 1. PRIMITIVES: type ---------- */
  --font-display: "Poppins", sans-serif;
  --font-text: "Poppins", sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* from Figma text style "Code snippet"; not theme-specific */
  --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 style Xsmall */

  /* ---------- 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-600);
  --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-accent);
  --link-visited: darken((var(--color-accent), 15));
  --link-inverse: lighten((var(--color-accent), 50));
  --link-primary-hover: var(--color-accent);
  --link-inverse-hover: lighten((var(--color-accent), 50));
  --link-inverse-visited: lighten((var(--color-accent), 30));

  /* 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 */
  --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 are chosen to match the Figma breakpoints (md 768, xl 1280). Adjust if needed. */
@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);
  }
}