/* =============================================================================
 * UMag Design System — Design Tokens (canonical, LLM-readable)
 * =============================================================================
 *
 * This file is the SINGLE SOURCE OF TRUTH for the design-token contract.
 * It is organised into three layers. NEVER skip a layer.
 *
 *   LAYER 1  Upstream design-system PRIMITIVES (raw palette + pixel ramp).
 *            Generated/owned by the design system. Do not consume directly
 *            in components.
 *
 *   LAYER 2  Project SEMANTIC ALIASES. Every alias references a Layer-1
 *            primitive and carries a literal fallback, e.g.
 *                --text-primary-default: var(--grayscale-800, #1f1f1f);
 *            THIS is the layer components are allowed to use.
 *
 *   LAYER 3  The COMPONENTS themselves (lib/**/*.scss). They reference ONLY
 *            Layer-2 aliases — never a Layer-1 primitive, never a raw value.
 *            (See the rule block at the bottom of this file.)
 *
 * The Layer-1/Layer-2 color, space, radius, typography and shadow values mirror
 * the SCSS partials in assets/styles/tokens/*. The z-index and motion blocks are
 * new; matching SCSS partials (_zindex.scss, _motion.scss) emit them at runtime.
 * ========================================================================== */

/* =============================================================================
 * LAYER 1 — UPSTREAM DESIGN-SYSTEM PRIMITIVES
 * Do not use these directly in component styles. Consume Layer 2 instead.
 * ========================================================================== */
:root {
  /* ---- Color primitives: Critical (red) ---- */
  --critical-50: #fff6f5;
  --critical-100: #ffedeb;
  --critical-200: #ffcbc2;
  --critical-300: #ffa697;
  --critical-400: #ff725f;
  --critical-500: #ff3826;
  --critical-600: #e31504;
  --critical-700: #c81d0f;
  --critical-800: #a51b0f;

  /* ---- Color primitives: Emerald (brand green) ---- */
  --emerald-50: #f2fcf3;
  --emerald-100: #e1f9e4;
  --emerald-200: #c3f2cc;
  --emerald-300: #95e7a6;
  --emerald-400: #5bd47c;
  --emerald-500: #2dbe60;
  --emerald-600: #0c9344;
  --emerald-700: #1d793c;
  --emerald-800: #1f6032;

  /* ---- Color primitives: Grayscale ---- */
  --grayscale-50: #ffffff;
  --grayscale-100: #fafafa;
  --grayscale-200: #f5f5f5;
  --grayscale-300: #e1e1e1;
  --grayscale-400: #cccccc;
  --grayscale-500: #a3a3a3;
  --grayscale-600: #898989;
  --grayscale-700: #5c5c5c;
  --grayscale-800: #1f1f1f;

  /* ---- Color primitives: Grayscale transparent (on #1f1f1f) ---- */
  --grayscale-transparent-50: #1f1f1f00;
  --grayscale-transparent-100: #1f1f1f1f;
  --grayscale-transparent-200: #1f1f1f3d;
  --grayscale-transparent-300: #1f1f1f52;
  --grayscale-transparent-400: #1f1f1fa3;
  --grayscale-transparent-500: #1f1f1fb8;
  --grayscale-transparent-600: #1f1f1fcc;
  --grayscale-transparent-700: #1f1f1fe0;
  --grayscale-transparent-800: #1f1f1f;

  /* ---- Color primitives: Sea blue (accent) ---- */
  --sea-blue-50: #f1f6fd;
  --sea-blue-100: #e8f1fe;
  --sea-blue-200: #d0e1fb;
  --sea-blue-300: #a9cafe;
  --sea-blue-400: #85b5fe;
  --sea-blue-500: #5b9bfd;
  --sea-blue-600: #076ff2;
  --sea-blue-700: #005bcb;
  --sea-blue-800: #004baa;

  /* ---- Color primitives: Warning (orange) ---- */
  --warning-50: #fff9f6;
  --warning-100: #ffeee4;
  --warning-200: #fdd1b9;
  --warning-300: #fbb38b;
  --warning-400: #fc995d;
  --warning-500: #ff7a00;
  --warning-600: #ba5c17;
  --warning-700: #9f4a01;
  --warning-800: #843e09;

  /* ---- Color primitives: Info-1 (purple / promo) ---- */
  --info-1-50: #fbf5ff;
  --info-1-100: #f8edff;
  --info-1-200: #eed6fe;
  --info-1-300: #e1b6fc;
  --info-1-400: #d088f8;
  --info-1-500: #ba4cf0;
  --info-1-600: #ab31e2;
  --info-1-700: #9421c6;
  --info-1-800: #7c22a4;

  /* ---- Color primitives: Info-2 (amber) ---- */
  --info-2-50: #fff8f0;
  --info-2-100: #ffebd1;
  --info-2-200: #ffdaaa;
  --info-2-300: #ffc472;
  --info-2-400: #ffae1f;
  --info-2-500: #e59a01;
  --info-2-600: #aa710c;
  --info-2-700: #956301;
  --info-2-800: #784e00;

  /* ---- Color primitives: Info-3 (teal) ---- */
  --info-3-50: #f2fbfb;
  --info-3-100: #d1fcfc;
  --info-3-200: #a4f1f0;
  --info-3-300: #71e6e6;
  --info-3-400: #47cdcd;
  --info-3-500: #3ab3b3;
  --info-3-600: #258a8b;
  --info-3-700: #246f6f;
  --info-3-800: #235c5c;

  /* ---- Pixel ramp (raw spacing primitives, 4px base grid) ---- */
  --0: 0px;
  --2: 2px;
  --4: 4px;
  --6: 6px;
  --8: 8px;
  --12: 12px;
  --16: 16px;
  --20: 20px;
  --24: 24px;
  --28: 28px;
  --32: 32px;
  --40: 40px;
}

/* =============================================================================
 * LAYER 2 — PROJECT SEMANTIC ALIASES  (the layer components consume)
 * Each alias: var(<layer-1 primitive>, <literal fallback>).
 * ========================================================================== */
:root {
  /* ---- Text colors ---- */
  --text-primary-default: var(--grayscale-800, #1f1f1f);
  --text-primary-inverse: var(--grayscale-50, #ffffff);
  --text-secondary-default: var(--grayscale-700, #5c5c5c);
  --text-secondary-inverse: var(--grayscale-500, #a3a3a3);
  --text-tertiary-default: var(--grayscale-500, #a3a3a3);
  --text-disabled-default: var(--grayscale-500, #a3a3a3);
  --text-accent-default: var(--sea-blue-600, #076ff2);
  --text-accent-hover: var(--sea-blue-700, #005bcb);
  --text-accent-active: var(--sea-blue-800, #004baa);
  --text-brand-default: var(--emerald-500, #2dbe60);
  --text-brand-hover: var(--emerald-600, #0c9344);
  --text-brand-active: var(--emerald-700, #1d793c);
  --text-critical-default: var(--critical-500, #ff3826);
  --text-critical-hover: var(--critical-600, #e31504);
  --text-critical-active: var(--critical-700, #c81d0f);
  --text-warning-default: var(--warning-500, #ff7a00);
  --text-promo-default: var(--info-1-500, #ba4cf0);
  --text-promo-hover: var(--info-1-600, #ab31e2);
  --text-promo-active: var(--info-1-700, #9421c6);
  --text-promo-soft: var(--info-1-100, #f8edff);
  --text-promo-soft-active: var(--info-1-200, #eed6fe);

  /* ---- Background colors ---- */
  --bg-primary-default: var(--grayscale-50, #ffffff);
  --bg-primary-hover: var(--grayscale-200, #f5f5f5);
  --bg-primary-active: var(--grayscale-300, #e1e1e1);
  --bg-primary-inverse: var(--grayscale-700, #5c5c5c);
  --bg-secondary-default: var(--grayscale-200, #f5f5f5);
  --bg-secondary-hover: var(--grayscale-300, #e1e1e1);
  --bg-secondary-active: var(--grayscale-400, #cccccc);
  --bg-secondary-inverse: var(--grayscale-500, #a3a3a3);
  --bg-secondary-inverse-hover: var(--grayscale-600, #898989);
  --bg-tertiary-default: var(--grayscale-300, #e1e1e1);
  --bg-tertiary-hover: var(--grayscale-400, #cccccc);
  --bg-tertiary-active: var(--grayscale-500, #a3a3a3);
  --bg-accent-default: var(--sea-blue-600, #076ff2);
  --bg-accent-hover: var(--sea-blue-700, #005bcb);
  --bg-accent-active: var(--sea-blue-800, #004baa);
  --bg-accent-soft: var(--sea-blue-100, #e8f1fe);
  --bg-accent-soft-active: var(--sea-blue-200, #d0e1fb);
  --bg-brand-default: var(--emerald-500, #2dbe60);
  --bg-brand-hover: var(--emerald-600, #0c9344);
  --bg-brand-active: var(--emerald-700, #1d793c);
  --bg-brand-soft: var(--emerald-100, #e1f9e4);
  --bg-brand-soft-active: var(--emerald-200, #c3f2cc);
  --bg-critical-default: var(--critical-500, #ff3826);
  --bg-critical-hover: var(--critical-600, #e31504);
  --bg-critical-active: var(--critical-700, #c81d0f);
  --bg-critical-soft: var(--critical-100, #ffedeb);
  --bg-critical-soft-active: var(--critical-200, #ffcbc2);
  --bg-warning-default: var(--warning-500, #ff7a00);
  --bg-warning-hover: var(--warning-600, #ba5c17);
  --bg-warning-active: var(--warning-700, #9f4a01);
  --bg-warning-soft: var(--warning-100, #ffeee4);
  --bg-warning-soft-active: var(--warning-200, #fdd1b9);
  --bg-promo-default: var(--info-1-500, #ba4cf0);
  --bg-promo-hover: var(--info-1-600, #ab31e2);
  --bg-promo-active: var(--info-1-700, #9421c6);
  --bg-promo-soft: var(--info-1-100, #f8edff);
  --bg-promo-soft-active: var(--info-1-200, #eed6fe);
  --bg-disabled-default: var(--grayscale-300, #e1e1e1);
  --bg-disabled-default-inverse: var(--grayscale-600, #898989);
  --bg-transparent-default: var(--grayscale-transparent-50, #1f1f1f00);
  --bg-transparent-hover: var(--grayscale-transparent-100, #1f1f1f1f);
  --bg-transparent-active: var(--grayscale-transparent-200, #1f1f1f3d);
  --bg-surface-overlay: var(--grayscale-transparent-200, #1f1f1f3d);
  --bg-surface-sf-0: var(--grayscale-50, #ffffff);
  --bg-surface-sf-1: var(--grayscale-200, #f5f5f5);
  --bg-surface-sf-2: var(--grayscale-300, #e1e1e1);

  /* ---- Border colors ---- */
  --border-primary-default: var(--grayscale-transparent-300, #1f1f1f52);
  --border-primary-soft: var(--grayscale-transparent-100, #1f1f1f1f);
  --border-accent-default: var(--sea-blue-600, #076ff2);
  --border-accent-hover: var(--sea-blue-700, #005bcb);
  --border-accent-active: var(--sea-blue-800, #004baa);
  --border-brand-default: var(--emerald-500, #2dbe60);
  --border-brand-hover: var(--emerald-600, #0c9344);
  --border-brand-active: var(--emerald-700, #1d793c);
  --border-critical-default: var(--critical-500, #ff3826);
  --border-critical-hover: var(--critical-600, #e31504);
  --border-critical-active: var(--critical-700, #c81d0f);
  --border-warning-default: var(--warning-500, #ff7a00);

  /* ---- Icon colors ---- */
  --icon-primary-default: var(--grayscale-800, #1f1f1f);
  --icon-primary-inverse: var(--grayscale-50, #ffffff);
  --icon-primary-inverse-hover: var(--grayscale-200, #f5f5f5);
  --icon-secondary-default: var(--grayscale-700, #5c5c5c);
  --icon-secondary-inverse: var(--grayscale-400, #cccccc);
  --icon-tertiary-default: var(--grayscale-300, #e1e1e1);
  --icon-disabled-default: var(--grayscale-500, #a3a3a3);
  --icon-accent-default: var(--sea-blue-600, #076ff2);
  --icon-accent-hover: var(--sea-blue-700, #005bcb);
  --icon-accent-active: var(--sea-blue-800, #004baa);
  --icon-brand-default: var(--emerald-500, #2dbe60);
  --icon-brand-hover: var(--emerald-600, #0c9344);
  --icon-brand-active: var(--emerald-700, #1d793c);
  --icon-critical-default: var(--critical-500, #ff3826);
  --icon-critical-hover: var(--critical-600, #e31504);
  --icon-critical-active: var(--critical-700, #c81d0f);
  --icon-warning-default: var(--warning-500, #ff7a00);
  --icon-promo-default: var(--info-1-500, #ba4cf0);
  --icon-promo-hover: var(--info-1-600, #ab31e2);
  --icon-promo-active: var(--info-1-700, #9421c6);
  --icon-promo-soft: var(--info-1-100, #f8edff);
  --icon-promo-soft-active: var(--info-1-200, #eed6fe);

  /* ---- Spacing scale (4px base grid; consume these, not the pixel ramp) ---- */
  --space-0: var(--0, 0px);
  --space-0-5x: var(--2, 2px);
  --space-1x: var(--4, 4px);
  --space-1-5x: var(--6, 6px);
  --space-2x: var(--8, 8px);
  --space-3x: var(--12, 12px);
  --space-4x: var(--16, 16px);
  --space-5x: var(--20, 20px);
  --space-6x: var(--24, 24px);
  --space-7x: var(--28, 28px);
  --space-8x: var(--32, 32px);
  --space-10x: var(--40, 40px);

  /* ---- Border radius ---- */
  --radius-0: 0px;
  --radius-0-5x: 3px;
  --radius-1x: 6px;
  --radius-2x: 12px;
  --radius-3x: 18px;
  --radius-4x: 24px;
  --radius-full: 9999px;

  /* ---- Typography: family ---- */
  --font-family-roboto: Roboto;

  /* ---- Typography: size ---- */
  --font-size-s: 12px;
  --font-size-m: 14px;
  --font-size-l: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;

  /* ---- Typography: weight ---- */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* ---- Typography: line height ---- */
  --font-line-height-s: 14px;
  --font-line-height-m: 18px;
  --font-line-height-l: 20px;
  --font-line-height-xl: 24px;
  --font-line-height-2xl: 28px;
  --font-line-height-3xl: 36px;

  /* ---- Typography: paragraph spacing ---- */
  --font-paragraph-spacing-xs: 4px;
  --font-paragraph-spacing-s: 4px;
  --font-paragraph-spacing-m: 4px;
  --font-paragraph-spacing-l: 8px;
  --font-paragraph-spacing-xl: 8px;
  --font-paragraph-spacing-xxl: 8px;

  /* ---- Elevation / shadow ---- */
  --shadow-pt-4: 0px 2px 4px 0px rgba(31, 31, 31, 0.08);
  --shadow-pt-8: 0px 0px 2px 0px rgba(31, 31, 31, 0.08),
    0px 2px 24px 0px rgba(31, 31, 31, 0.08);
  --shadow-pt-16: 0px 0px 2px 0px rgba(31, 31, 31, 0.12),
    0px 0px 96px 0px rgba(31, 31, 31, 0.16);
  --shadow-pt-32: 0px 0px 2px 0px rgba(31, 31, 31, 0.08),
    0px 0px 24px 0px rgba(31, 31, 31, 0.16);

  /* ---- Z-index scale (NEW) ----
   * Use the named layer that matches a component's stacking role; do not invent
   * arbitrary integers. Higher = closer to the viewer. */
  --z-base: 0;          /* in-flow content */
  --z-dropdown: 1000;   /* select / dropdown / context-menu panels */
  --z-sticky: 1100;     /* sticky table headers, pinned columns */
  --z-overlay: 1200;    /* backdrops / scrims behind modals & sheets */
  --z-modal: 1300;      /* dialogs, bottom sheets */
  --z-popover: 1400;    /* popovers, date-picker panels */
  --z-toast: 1500;      /* toast notifications */
  --z-tooltip: 1600;    /* tooltips — always on top */

  /* ---- Motion (NEW) ----
   * Pair a duration with an easing for every transition/animation. */
  --duration-instant: 0ms;
  --duration-fast: 120ms;   /* hover/focus tints, small state flips */
  --duration-base: 200ms;   /* default — most enter/exit transitions */
  --duration-slow: 320ms;   /* sheets, large overlays, expand/collapse */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);  /* default for most moves */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);        /* exits / disappearing */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);       /* entrances / appearing */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);  /* movement within view */
}

/* =============================================================================
 * LAYER 3 — COMPONENT USAGE RULE (documentation, not declarations)
 * -----------------------------------------------------------------------------
 * Components (lib/**/*.scss) MUST:
 *   - reference ONLY Layer-2 aliases above, e.g.
 *         color: var(--text-primary-default);
 *         padding: var(--space-2x) var(--space-4x);
 *         border-radius: var(--radius-1x);
 *         box-shadow: var(--shadow-pt-8);
 *         z-index: var(--z-modal);
 *         transition: opacity var(--duration-base) var(--ease-standard);
 *   - NEVER use a raw hex/rgb color, raw px spacing, raw radius, raw shadow,
 *     raw z-index integer, or raw duration.
 *   - NEVER reference a Layer-1 primitive (e.g. var(--grayscale-800)) directly.
 *
 * Enforced by scripts/token-audit.js — zero errors required before commit.
 * ========================================================================== */