/**
 * ZY MoonShine design tokens — brand primitives/semantics.
 *
 * Design read: operator admin cockpit (Swiss-minimal), slate/ink/cobalt —
 * NOT a marketing landing.
 *
 * Brand lock (r2 redesign): cobalt #2E5AAC · slate #F3F5F7 · ink #14171C
 * Fonts: IBM Plex Sans (UI) · JetBrains Mono (IDs / numbers)
 *
 * Variable names keep their legacy "lime/cream" identifiers on purpose
 * (hundreds of call sites in zy-admin.css / zy-condition-builder.css read
 * them) — only the *values* moved from the old cream/ink/lime cockpit to
 * this cool slate/ink/cobalt one. Read `--zy-lime` as "accent", not lime.
 *
 * Load BEFORE zy-admin.css. :root only — do not redeclare these primitives in zy-admin.css.
 */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ——— Brand primitives (exact brand-lock hex) ——— */
  --zy-lime: #2E5AAC;
  --zy-lime-bright: #3B63D8;
  --zy-lime-hover: #3B63D8;
  --zy-lime-active: #234A8C;
  --zy-lime-muted: color-mix(in srgb, var(--zy-lime) 16%, #FFFFFF);
  --zy-lime-wash: color-mix(in srgb, var(--zy-lime) 10%, var(--zy-cream));
  --zy-black: #14171C;
  --zy-ink: #14171C;
  --zy-white: #FFFFFF;
  --zy-cream: #F3F5F7;
  --zy-cream-deep: #E7EAEE;
  --zy-gray-50: #F5F6F8;
  --zy-gray-100: #E9ECF0;
  --zy-gray-200: #DBDFE5;
  --zy-gray-300: #C2C8D2;
  --zy-gray-400: #9AA2B0;
  --zy-gray-500: #707888;
  --zy-gray-600: #4E5665;
  --zy-gray-700: #333A47;
  --zy-gray-800: #212630;
  --zy-gray-900: #171A21;

  /* ——— Neutral / status scale (cool slate family) ——— */
  --color-gray-50: var(--zy-gray-50);
  --color-gray-100: var(--zy-gray-100);
  --color-gray-200: var(--zy-gray-200);
  --color-gray-300: var(--zy-gray-300);
  --color-gray-400: var(--zy-gray-400);
  --color-gray-500: var(--zy-gray-500);
  --color-gray-600: var(--zy-gray-600);
  --color-gray-700: var(--zy-gray-700);
  --color-gray-800: var(--zy-gray-800);
  --color-gray-900: var(--zy-gray-900);
  --color-gray-950: var(--zy-black);

  /* Status scale — kept clear of the cobalt accent (info shifted to teal so it never reads as "another accent") */
  --color-green-500: #15803D;
  --color-green-600: #15803D;
  --color-green-700: #166534;
  --color-green-800: #14532D;
  --color-red-600: #DC2626;
  --color-red-700: #B91C1C;
  --color-amber-500: #D97706;
  --color-blue-500: #0D9488;

  /* ——— Semantic surfaces ——— */
  --color-background: var(--zy-cream);
  --color-foreground: var(--zy-ink);
  --color-muted: var(--zy-cream-deep);
  --color-muted-foreground: var(--zy-gray-500);
  --color-card: var(--zy-white);
  --color-card-foreground: var(--zy-ink);
  --color-border: color-mix(in srgb, var(--zy-ink) 10%, transparent);
  --color-input: color-mix(in srgb, var(--zy-ink) 14%, transparent);

  --color-primary: var(--zy-black);
  --color-primary-hover: var(--zy-gray-800);
  --color-primary-active: var(--zy-gray-900);
  --color-primary-foreground: var(--zy-white);

  --color-accent: var(--zy-lime);
  --color-accent-hover: var(--zy-lime-bright);
  --color-accent-foreground: var(--zy-white);

  --color-sidebar: var(--zy-gray-900);
  --color-sidebar-foreground: var(--zy-white);
  --color-sidebar-muted: color-mix(in srgb, var(--zy-white) 58%, transparent);
  --color-sidebar-hover: color-mix(in srgb, var(--zy-white) 7%, transparent);
  --color-sidebar-active: var(--zy-lime);
  --color-sidebar-active-fg: var(--zy-white);

  --color-destructive: var(--color-red-600);
  --color-destructive-hover: var(--color-red-700);
  --color-destructive-foreground: var(--zy-white);

  --color-success: #15803D;
  --color-success-foreground: var(--zy-white);
  --color-warning: var(--color-amber-500);
  --color-warning-foreground: var(--zy-black);
  --color-error: var(--color-red-600);
  --color-error-foreground: var(--zy-white);
  --color-info: var(--color-blue-500);
  --color-info-foreground: var(--zy-white);

  --color-ring: var(--zy-lime);
  --color-scrim: rgb(20 23 28 / 0.5);

  /*
   * ——— Status chips ———
   * A data table is mostly status. Solid fills turn it into confetti: eight
   * saturated blocks per row and nothing reads as more important than
   * anything else. Chips are therefore *tinted*, not filled — the hue
   * carries the meaning, the ink carries the text, and a whole column of
   * them still scans as text.
   *
   * Solid accent stays reserved for exactly two things: the current nav item
   * and a primary submit. If it shows up in a table cell it has been misused.
   */
  --chip-neutral-bg: var(--zy-gray-100);
  --chip-neutral-fg: var(--zy-gray-700);
  --chip-neutral-bd: var(--zy-gray-200);

  --chip-accent-bg: color-mix(in srgb, var(--zy-lime) 11%, var(--zy-white));
  --chip-accent-fg: #23477F;
  --chip-accent-bd: color-mix(in srgb, var(--zy-lime) 28%, var(--zy-white));

  --chip-success-bg: color-mix(in srgb, #15803D 11%, var(--zy-white));
  --chip-success-fg: #146132;
  --chip-success-bd: color-mix(in srgb, #15803D 26%, var(--zy-white));

  --chip-warning-bg: color-mix(in srgb, #D97706 13%, var(--zy-white));
  --chip-warning-fg: #8A4B04;
  --chip-warning-bd: color-mix(in srgb, #D97706 28%, var(--zy-white));

  --chip-danger-bg: color-mix(in srgb, #DC2626 10%, var(--zy-white));
  --chip-danger-fg: #A81C1C;
  --chip-danger-bd: color-mix(in srgb, #DC2626 25%, var(--zy-white));

  --chip-info-bg: color-mix(in srgb, #0D9488 11%, var(--zy-white));
  --chip-info-fg: #0B6B62;
  --chip-info-bd: color-mix(in srgb, #0D9488 26%, var(--zy-white));

  /* ——— Spacing: 4/8px rhythm (density 8 cockpit) ——— */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --spacing-page-x: var(--space-5);
  --spacing-page-y: var(--space-5);
  --spacing-section: var(--space-5);
  --sidebar-width: 14.5rem;
  --table-row-height: 38px;

  /*
   * ——— Density ———
   * Operators scan this panel all day; every row that fits without scrolling
   * is a row they don't have to hunt for. Controls share one height so
   * buttons, inputs and selects line up on a single baseline.
   */
  --control-h: 2.25rem;      /* 36px — buttons, inputs, selects */
  --control-h-sm: 1.875rem;  /* 30px — table row actions, tabs */
  --cell-pad-y: 0.4375rem;
  --cell-pad-x: 0.75rem;
  --font-size-table: 0.8125rem;
  --font-size-label: 0.8125rem;

  /*
   * A text input is not more usable at 1200px than at 520px — the eye has to
   * travel back to the left edge to read the label. Fields cap out; only
   * genuinely wide content (JSON, tables, the condition builder) opts out.
   */
  --field-max: 34rem;
  --field-max-wide: 52rem;

  /* ——— Typography: IBM Plex Sans + JetBrains Mono ——— */
  --font-display: "IBM Plex Sans", system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 0.9375rem;
  --font-size-lg: 1.0625rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.625rem;
  --font-size-3xl: 2rem;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --tracking-cta: 0.01em;

  /* ——— Radius ——— */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* ——— Elevation: slate-tinted shadows (no neon / purple glow) ——— */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #14171C 6%, transparent);
  --shadow-md: 0 6px 20px color-mix(in srgb, #14171C 8%, transparent);
  --shadow-lg: 0 16px 40px color-mix(in srgb, #14171C 12%, transparent);

  /* ——— Z-index scale ——— */
  --z-sticky: 1100;
  --z-dropdown: 1200;
  --z-modal: 1300;
  --z-toast: 1400;

  /* ——— Motion: restrained 120–240ms ——— */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 240ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ——— Interaction chrome ——— */
  --opacity-disabled: 0.45;
  --ring-width: 2px;
  --ring-offset: 2px;
  --touch-min: 44px;
  --content-max: 72rem;

  /* ——— Short aliases (zy-admin.css convenience) ——— */
  --bg: var(--color-background);
  --cream: var(--zy-cream);
  --ink: var(--color-foreground);
  --lime: var(--zy-lime);
  --muted: var(--color-muted-foreground);
  --line: var(--color-border);
  --accent: var(--color-accent);
  --danger: var(--color-destructive);
  --card: var(--color-card);
  --sidebar: var(--color-sidebar);
  --font: var(--font-sans);
  --mono: var(--font-mono);
}