/* ==========================================================================
   Cayuse Design System — Design Tokens
   --------------------------------------------------------------------------
   Generated from the Figma file "Cayuse DS remix ai tools".

   The four Figma variable collections map to CSS custom properties 1:1.
   A Figma variable path becomes a custom property by replacing "/" with "-":

       color-primitives   blue/300                  -->  --color-blue-300
       text-primatives    fontSize/14               -->  --font-size-14
       spacing            radius/3                  -->  --radius-3
       semantics          button/primary/background -->  --button-primary-background

   LAYERING RULE — the same rule Figma enforces:
   Primitives hold raw values. Semantics alias primitives. Components consume
   semantics. Never reach past a layer: a component rule that uses
   --color-blue-300 instead of --button-primary-background is a bug, because
   rebranding then has to touch every component instead of one alias.
   ========================================================================== */

:root {

  /* ======================================================================
     LAYER 1 — PRIMITIVES  (Figma: color-primitives, 27 variables)
     Raw values. Do not consume these directly in component CSS.
     ====================================================================== */

  --color-white: #ffffff;
  --color-black: #111111;

  --color-blue-100: #e1eaf8;
  --color-blue-200: #44a3db;
  --color-blue-300: #0076b6;   /* Cayuse brand blue */
  --color-blue-400: #005c8e;
  --color-blue-500: #253272;

  --color-gray-100: #f5f5f5;
  --color-gray-200: #eeeeee;
  --color-gray-300: #cccccc;
  --color-gray-400: #888c8c;
  --color-gray-500: #5e5e5e;

  --color-green-100: #f8fdef;
  --color-green-500: #285d35;

  --color-yellow-100: #7d3d02;  /* NOTE: a dark brown, not a yellow — see Color foundation */
  --color-yellow-200: #fff8d8;
  --color-yellow-300: #fbb829;
  --color-yellow-400: #ffe545;

  --color-red-100: #ffe8e6;
  --color-red-500: #b31200;

  /* Status palette — a separate ramp from the UI palette above.
     These are the only approved fills for the Status Pill component. */
  --color-status-yellow: #ffc810;
  --color-status-orange: #ff5630;
  --color-status-light-blue: #accdff;
  --color-status-blue: #0747a6;
  --color-status-green: #006644;
  --color-status-gray: #d4d4d5;
  --color-status-custom: #333333;


  /* ======================================================================
     LAYER 1 — PRIMITIVES  (Figma: text-primatives, 25 variables)
     ====================================================================== */

  --font-family-primary: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-icon: "Font Awesome 6 Free", "Font Awesome 6 Pro", sans-serif;

  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-32: 32px;
  --font-size-36: 36px;
  --font-size-42: 42px;
  --font-size-48: 48px;
  --font-size-54: 54px;
  --font-size-60: 60px;
  --font-size-68: 68px;
  --font-size-76: 76px;
  --font-size-84: 84px;
  --font-size-92: 92px;

  --line-height-14: 14px;
  --line-height-16: 16px;
  --line-height-20: 20px;
  --line-height-24: 24px;
  --line-height-28: 28px;

  --font-weight-regular: 400;
  --font-weight-bold: 700;


  /* ======================================================================
     LAYER 1 — PRIMITIVES  (Figma: spacing, 25 variables)
     A 4pt grid. 1/2/6/10 exist for optical corrections and hairlines only.
     ====================================================================== */

  --spacing-1: 1px;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;

  --radius-2: 2px;
  --radius-3: 3px;    /* default control radius */
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-20: 20px;  /* pills */

  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-3: 3px;


  /* ======================================================================
     LAYER 2 — SEMANTICS  (Figma: semantics, 104 variables)
     Every value here is an alias. This is the layer you theme.
     ====================================================================== */

  /* --- Brand & global state ------------------------------------------- */
  --primary-brand-color: var(--color-blue-300);

  --disabled-background: var(--color-gray-200);
  --disabled-text: var(--color-gray-400);
  --focus-ring: var(--color-blue-200);

  --error-text: var(--color-red-500);
  --error-background: var(--color-red-100);
  --error-border: var(--color-red-500);

  --success-text: var(--color-green-500);
  --success-background: var(--color-green-100);
  --success-border: var(--color-green-500);

  /* Deprecated spellings — the Figma variables are named "succes/*" (one s).
     Kept so generated output keeps resolving; rename in Figma, then delete. */
  --succes-text: var(--success-text);
  --succes-background: var(--success-background);
  --succes-border: var(--success-border);

  /* --- Button ---------------------------------------------------------- */
  --button-primary-background: var(--primary-brand-color);
  --button-primary-text: var(--color-white);
  --button-primary-border: var(--primary-brand-color);
  --button-primary-hover-background: var(--color-blue-400);
  --button-primary-focus-border: var(--focus-ring);
  --button-primary-disabled-background: var(--disabled-background);
  --button-primary-disabled-text: var(--disabled-text);

  --button-secondary-background: var(--color-white);
  --button-secondary-text: var(--primary-brand-color);
  --button-secondary-border: var(--primary-brand-color);
  --button-secondary-hover-background: var(--color-blue-100);
  --button-secondary-focus-border: var(--color-blue-200);
  --button-secondary-disabled-background: var(--disabled-background);
  --button-secondary-disabled-text: var(--disabled-text);

  /* --- Icon ------------------------------------------------------------ */
  --icon-primary: var(--primary-brand-color);
  --icon-accent-1: var(--color-blue-200);
  --icon-accent-2: var(--color-white);
  --icon-accent-3: var(--color-black);
  --icon-accent-4: var(--color-gray-500);

  /* --- Input ----------------------------------------------------------- */
  --input-background: var(--color-white);
  --input-border: var(--color-gray-400);
  --input-text: var(--color-black);
  --input-focus-border: var(--focus-ring);
  --input-error-background: var(--color-red-100);
  --input-error-border: var(--color-red-500);
  --input-disabled-background: var(--color-gray-100);
  --input-disabled-text: var(--disabled-text);
  --input-label: var(--color-black);
  --input-required: var(--color-red-500);
  --input-caption: var(--color-gray-500);
  --input-error-caption: var(--color-red-500);

  /* --- Container ------------------------------------------------------- */
  --container-background: var(--color-white);
  --container-border: var(--color-gray-300);
  --container-text: var(--color-black);
  --container-highlight: var(--primary-brand-color);

  /* --- Link ------------------------------------------------------------ */
  --link-default: var(--color-blue-500);
  --link-hover: var(--color-blue-200);

  /* --- Tab ------------------------------------------------------------- */
  --tab-active-text: var(--primary-brand-color);
  --tab-active-border: var(--primary-brand-color);
  --tab-active-background: var(--color-white);
  --tab-inactive-text: var(--color-black);
  --tab-border: var(--color-gray-300);

  /* --- Toggle ---------------------------------------------------------- */
  --toggle-on-background: var(--primary-brand-color);
  --toggle-on-indicator: var(--color-white);
  --toggle-off-background: var(--color-gray-500);
  --toggle-off-indicator: var(--color-white);
  --toggle-disabled-background: var(--disabled-text);

  /* --- Table ----------------------------------------------------------- */
  --table-header-background: var(--color-gray-100);
  --table-header-border: var(--color-gray-300);
  --table-header-text: var(--color-black);
  --table-cell-background: var(--color-white);
  --table-cell-border: var(--color-gray-200);
  --table-cell-text: var(--color-black);
  --table-cell-hover: var(--color-gray-200);

  /* --- Menu ------------------------------------------------------------ */
  --menu-background: var(--color-white);
  --menu-border: var(--color-gray-300);
  --menu-text: var(--color-black);
  --menu-hover: var(--color-gray-200);
  --menu-active: var(--color-blue-100);

  /* --- Pagination ------------------------------------------------------ */
  --pagination-selected-background: var(--primary-brand-color);
  --pagination-selected-text: var(--color-white);
  --pagination-default-background: var(--color-white);
  --pagination-default-text: var(--color-black);
  --pagination-border: var(--color-gray-300);
  --pagination-disabled: var(--color-gray-300);

  /* --- Switch ---------------------------------------------------------- */
  --switch-selected-background: var(--primary-brand-color);
  --switch-selected-text: var(--color-white);
  --switch-unselected-background: var(--color-white);
  --switch-unselected-text: var(--color-gray-500);

  /* --- Divider / Scrollbar / Tooltip ----------------------------------- */
  --divider-color: var(--color-gray-500);
  --scrollbar-track: var(--color-gray-200);
  --scrollbar-thumb: var(--color-gray-300);
  --tooltip-background: var(--color-gray-500);
  --tooltip-text: var(--color-white);

  /* --- Tile ------------------------------------------------------------ */
  --tile-background: var(--color-gray-300);
  --tile-card-background: var(--color-white);
  --tile-count-text: var(--primary-brand-color);
  --tile-title-text: var(--color-black);
  --tile-description-text: var(--color-gray-500);
  --tile-action-text: var(--primary-brand-color);

  /* --- Breadcrumb / Navigation ----------------------------------------- */
  --breadcrumb-text: var(--color-black);
  --breadcrumb-link: var(--primary-brand-color);
  --breadcrumb-separator: var(--color-gray-500);
  --navigation-active: var(--primary-brand-color);
  --navigation-disabled: var(--disabled-text);

  /* --- Status ---------------------------------------------------------- */
  --status-yellow: var(--color-status-yellow);
  --status-orange: var(--color-status-orange);
  --status-light-blue: var(--color-status-light-blue);
  --status-blue: var(--color-status-blue);
  --status-green: var(--color-status-green);
  --status-gray: var(--color-status-gray);
  --status-custom: var(--color-status-custom);
  --status-text-dark: var(--color-black);
  --status-text-light: var(--color-white);


  /* ======================================================================
     LAYER 2 — PROPOSED ADDITIONS
     --------------------------------------------------------------------
     These 21 tokens do NOT exist in the Figma `semantics` collection.

     They were found by building the component layer: each one is a role a
     component genuinely needs, where the only way to style it was to reach
     straight into a primitive — the exact layer violation this system
     forbids everywhere else. Defining them here keeps every component rule
     on the semantic layer, and turns "we broke our own rule 21 times" into
     a concrete list of variables to add in Figma.

     Values are the primitives the components were already using, so adding
     these changes nothing visually. See foundations/tokens.html#gaps.
     ====================================================================== */

  /* Warning — the only feedback role with no semantic tokens.
     Error and success each have text/background/border; warning has none. */
  --warning-text: var(--color-yellow-100);
  --warning-background: var(--color-yellow-200);
  --warning-border: var(--color-yellow-300);

  /* Neutral messaging */
  --neutral-background: var(--color-gray-100);
  --neutral-border: var(--color-gray-300);

  /* Secondary text — captions outside of a form field.
     `input/caption` exists, but only makes sense inside an input. */
  --text-secondary: var(--color-gray-500);

  /* Data pill — the component has no semantic tokens at all */
  --data-pill-background: var(--color-blue-100);
  --data-pill-border: var(--primary-brand-color);
  --data-pill-pending-background: var(--color-gray-100);
  --data-pill-pending-border: var(--color-gray-400);
  --data-pill-pending-text: var(--color-gray-500);

  /* File upload drop zone */
  --dropzone-background: var(--color-gray-100);
  --dropzone-border: var(--color-gray-400);
  --dropzone-active-background: var(--color-blue-100);

  /* Suite header — the one surface in the system built on blue/500 */
  --suite-header-background: var(--color-blue-500);
  --suite-header-text: var(--color-white);

  /* Assorted single-use roles */
  --footer-text: var(--color-gray-500);
  --tooltip-border: var(--color-gray-300);
  --scrollbar-thumb-hover: var(--color-gray-400);
  --section-list-todo: var(--color-gray-400);
  --submenu-background: var(--color-gray-100);
  --on-brand-text: var(--color-white);


  /* ======================================================================
     LAYER 2 — TYPE STYLES  (Figma: local text styles, 13 styles)
     Composite tokens. Each group maps to one Figma text style.
     ====================================================================== */

  --type-page-title-size: var(--font-size-24);
  --type-page-title-line: var(--line-height-28);
  --type-page-title-weight: var(--font-weight-bold);

  --type-section-heading-size: var(--font-size-20);
  --type-section-heading-line: var(--line-height-28);
  --type-section-heading-weight: var(--font-weight-bold);

  --type-subheading-size: var(--font-size-16);
  --type-subheading-line: var(--line-height-20);
  --type-subheading-weight: var(--font-weight-regular);

  --type-body-size: var(--font-size-14);
  --type-body-line: var(--line-height-16);
  --type-body-weight: var(--font-weight-regular);

  --type-paragraph-size: var(--font-size-14);
  --type-paragraph-line: var(--line-height-20);
  --type-paragraph-weight: var(--font-weight-regular);

  --type-label-size: var(--font-size-14);
  --type-label-line: var(--line-height-16);
  --type-label-weight: var(--font-weight-bold);

  --type-caption-size: var(--font-size-12);
  --type-caption-line: var(--line-height-14);
  --type-caption-weight: var(--font-weight-regular);

  --type-list-size: var(--font-size-14);
  --type-list-line: var(--line-height-24);
}