/* =============================================================================
 * ChefStack Design System - Layer 1: Tokens
 * =============================================================================
 * The single source of truth for colour, type, space, radius and elevation.
 * Nothing in this file styles an element; it only declares custom properties.
 *
 * Palette direction: purple (primary) / blue (secondary) / green (tertiary),
 * orange reserved for warnings, red reserved for destructive actions.
 * Surfaces stay light and airy with a soft lavender ambient wash.
 *
 * Every colour token resolves through the same ramp in both themes, so a
 * component only ever references a semantic token and never a raw hex.
 * ========================================================================== */

/* --- Self-hosted typefaces -------------------------------------------------
 * Inter for UI/body text (matches chefstack.ai), Figtree for headings
 * (matches Astryx). Latin subsets only, variable weight axis, served locally
 * so the portal keeps no runtime dependency on a font CDN.
 * ------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../../fonts/cs/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree var";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../../fonts/cs/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* === Primitive ramps ================================================== */

  /* Purple - primary. Anchored on the chefstack.ai brand indigo #5b4fe8. */
  --cs-purple-50: #f2effe;
  --cs-purple-100: #e5dffd;
  --cs-purple-200: #cbc2fb;
  --cs-purple-300: #ac9ef6;
  --cs-purple-400: #8b78f0;
  --cs-purple-500: #5b4fe8;
  --cs-purple-600: #4b3fd1;
  --cs-purple-700: #3d33ac;
  --cs-purple-800: #2f2882;
  --cs-purple-900: #221c5e;

  /* Blue - secondary. */
  --cs-blue-50: #eff5ff;
  --cs-blue-100: #dbe8fe;
  --cs-blue-200: #bfd6fe;
  --cs-blue-300: #93bbfd;
  --cs-blue-400: #609afa;
  --cs-blue-500: #2f7bf6;
  --cs-blue-600: #1d5fe0;
  --cs-blue-700: #1a4cb8;
  --cs-blue-800: #1b4191;
  --cs-blue-900: #1b3873;

  /* Green - tertiary / success. Emerald, echoing the chefstack.ai teal. */
  --cs-green-50: #ecfdf5;
  --cs-green-100: #d1fae5;
  --cs-green-200: #a7f3d0;
  --cs-green-300: #6ee7b7;
  --cs-green-400: #34d399;
  --cs-green-500: #10b981;
  --cs-green-600: #059669;
  --cs-green-700: #047857;
  --cs-green-800: #065f46;
  --cs-green-900: #064e3b;

  /* Orange - warning only. */
  --cs-orange-50: #fff7ed;
  --cs-orange-100: #ffedd5;
  --cs-orange-200: #fed7aa;
  --cs-orange-300: #fdba74;
  --cs-orange-400: #fb923c;
  --cs-orange-500: #f97316;
  --cs-orange-600: #ea580c;
  --cs-orange-700: #c2410c;
  --cs-orange-800: #9a3412;
  --cs-orange-900: #7c2d12;

  /* Red - destructive only. Never used for emphasis or branding. */
  --cs-red-50: #fef2f2;
  --cs-red-100: #fee2e2;
  --cs-red-200: #fecaca;
  --cs-red-300: #fca5a5;
  --cs-red-400: #f87171;
  --cs-red-500: #ef4444;
  --cs-red-600: #dc2626;
  --cs-red-700: #b91c1c;
  --cs-red-800: #991b1b;
  --cs-red-900: #7f1d1d;

  /* Neutral - slate, matching the chefstack.ai marketing site. */
  --cs-neutral-0: #ffffff;
  --cs-neutral-25: #fcfdfe;
  --cs-neutral-50: #f8fafc;
  --cs-neutral-100: #f1f5f9;
  --cs-neutral-200: #e2e8f0;
  --cs-neutral-300: #cbd5e1;
  --cs-neutral-400: #94a3b8;
  --cs-neutral-500: #64748b;
  --cs-neutral-600: #475569;
  --cs-neutral-700: #334155;
  --cs-neutral-800: #1e293b;
  --cs-neutral-900: #0f172a;
  --cs-neutral-950: #080f1f;

  /* === Typography ======================================================= */
  --cs-font-sans: "Inter var", "Inter", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;
  --cs-font-display: "Figtree var", "Figtree", "Inter var", "Segoe UI",
    system-ui, sans-serif;
  --cs-font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas,
    "Liberation Mono", monospace;

  /* 14px body baseline - matches Astryx and the existing portal density. */
  --cs-text-2xs: 0.6875rem;  /* 11px - table column labels */
  --cs-text-xs: 0.75rem;     /* 12px - badges, captions, helper text */
  --cs-text-sm: 0.8125rem;   /* 13px - dense UI, small buttons */
  --cs-text-base: 0.875rem;  /* 14px - body, buttons, inputs, table cells */
  --cs-text-md: 1rem;        /* 16px - section leads */
  --cs-text-lg: 1.125rem;    /* 18px - card titles */
  --cs-text-xl: 1.375rem;    /* 22px - page titles */
  --cs-text-2xl: 1.75rem;    /* 28px - dashboard headlines */

  --cs-leading-tight: 1.25;
  --cs-leading-snug: 1.4;
  --cs-leading-normal: 1.55;

  --cs-weight-regular: 400;
  --cs-weight-medium: 500;
  --cs-weight-semibold: 600;
  --cs-weight-bold: 700;

  --cs-tracking-tight: -0.011em;
  --cs-tracking-wide: 0.04em;

  /* === Space ============================================================ */
  --cs-space-1: 0.25rem;
  --cs-space-2: 0.5rem;
  --cs-space-3: 0.75rem;
  --cs-space-4: 1rem;
  --cs-space-5: 1.25rem;
  --cs-space-6: 1.5rem;
  --cs-space-8: 2rem;
  --cs-space-10: 2.5rem;

  /* === Radius ===========================================================
   * One control radius for every interactive element across the portal:
   * buttons, inputs, selects, dropdown items, thumbnails, square badges.
   * Surfaces (cards/modals) use a softer radius; status pills stay round.
   * ====================================================================== */
  --cs-radius-control: 3px;
  --cs-radius-surface: 10px;
  --cs-radius-surface-lg: 14px;
  --cs-radius-pill: 999px;

  /* === Borders ========================================================== */
  --cs-border-width: 1px;

  /* === Control geometry ================================================= */
  --cs-control-height-sm: 30px;
  --cs-control-height-md: 36px;
  --cs-control-height-lg: 44px;
  --cs-icon-size: 16px;
  --cs-icon-size-sm: 14px;

  /* === Motion =========================================================== */
  --cs-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --cs-transition-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);

  /* === Z-index ========================================================== */
  --cs-z-dropdown: 1000;
  --cs-z-sticky: 1020;
  --cs-z-modal: 1050;
  --cs-z-toast: 1080;
}

/* =============================================================================
 * Semantic tokens - light theme (default)
 * ========================================================================== */
:root,
html[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --cs-canvas: var(--cs-neutral-50);
  --cs-surface: var(--cs-neutral-0);
  --cs-surface-subtle: var(--cs-neutral-50);
  --cs-surface-sunken: var(--cs-neutral-100);
  --cs-surface-hover: var(--cs-neutral-100);

  /* Frosted-glass surface used for card/modal headers and sticky bars. */
  --cs-glass: rgba(255, 255, 255, 0.72);
  --cs-glass-border: rgba(255, 255, 255, 0.6);

  /* Ambient wash behind the app shell - soft lavender/periwinkle. */
  --cs-ambient-1: rgba(139, 120, 240, 0.16);
  --cs-ambient-2: rgba(96, 154, 250, 0.14);
  --cs-ambient-3: rgba(52, 211, 153, 0.08);

  /* Text */
  --cs-text: var(--cs-neutral-900);
  /* neutral-600, not 500: muted text also lands on the tinted canvas and on
     --cs-surface-subtle, where neutral-500 measures 4.3:1 and misses AA. */
  --cs-text-muted: var(--cs-neutral-600);
  --cs-text-subtle: var(--cs-neutral-500);
  --cs-text-inverse: var(--cs-neutral-0);

  /* Lines */
  --cs-border: var(--cs-neutral-200);
  --cs-border-strong: var(--cs-neutral-300);
  --cs-border-subtle: var(--cs-neutral-100);

  /* --- Intent: primary (purple) --- */
  --cs-primary: var(--cs-purple-500);
  --cs-primary-hover: var(--cs-purple-600);
  --cs-primary-active: var(--cs-purple-700);
  --cs-primary-soft: var(--cs-purple-50);
  --cs-primary-soft-hover: var(--cs-purple-100);
  --cs-primary-border: var(--cs-purple-200);
  --cs-primary-text: var(--cs-purple-700);
  --cs-on-primary: #ffffff;

  /* --- Intent: secondary (blue) --- */
  --cs-secondary: var(--cs-blue-500);
  --cs-secondary-hover: var(--cs-blue-600);
  --cs-secondary-active: var(--cs-blue-700);
  --cs-secondary-soft: var(--cs-blue-50);
  --cs-secondary-soft-hover: var(--cs-blue-100);
  --cs-secondary-border: var(--cs-blue-200);
  --cs-secondary-text: var(--cs-blue-700);
  --cs-on-secondary: #ffffff;

  /* --- Intent: tertiary / success (green) --- */
  --cs-tertiary: var(--cs-green-500);
  --cs-tertiary-hover: var(--cs-green-600);
  --cs-tertiary-active: var(--cs-green-700);
  --cs-tertiary-soft: var(--cs-green-50);
  --cs-tertiary-soft-hover: var(--cs-green-100);
  --cs-tertiary-border: var(--cs-green-200);
  --cs-tertiary-text: var(--cs-green-700);
  --cs-on-tertiary: #ffffff;

  /* --- Intent: warning (orange) --- */
  --cs-warning: var(--cs-orange-500);
  --cs-warning-hover: var(--cs-orange-600);
  --cs-warning-soft: var(--cs-orange-50);
  --cs-warning-soft-hover: var(--cs-orange-100);
  --cs-warning-border: var(--cs-orange-200);
  --cs-warning-text: var(--cs-orange-700);
  --cs-on-warning: #ffffff;

  /* --- Intent: danger (red) - destructive actions only --- */
  --cs-danger: var(--cs-red-500);
  --cs-danger-hover: var(--cs-red-600);
  --cs-danger-active: var(--cs-red-700);
  --cs-danger-soft: var(--cs-red-50);
  --cs-danger-soft-hover: var(--cs-red-100);
  --cs-danger-border: var(--cs-red-200);
  --cs-danger-text: var(--cs-red-700);
  --cs-on-danger: #ffffff;

  /* --- Intent: neutral / quiet --- */
  --cs-neutral-soft: var(--cs-neutral-100);
  --cs-neutral-soft-hover: var(--cs-neutral-200);
  --cs-neutral-border: var(--cs-neutral-300);
  --cs-neutral-text: var(--cs-neutral-700);

  /* Elevation */
  --cs-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --cs-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
  --cs-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --cs-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.05);

  /* Focus ring - one ring for every focusable control. */
  --cs-focus-ring: 0 0 0 3px rgba(91, 79, 232, 0.28);

  /* Sidebar (stays dark in both themes - it is the app's anchor). */
  --cs-sidebar-bg-from: #1b1a4d;
  --cs-sidebar-bg-to: #0f1734;
  --cs-sidebar-text: rgba(226, 232, 240, 0.78);
  --cs-sidebar-text-active: #ffffff;
  --cs-sidebar-active-bg: rgba(139, 120, 240, 0.22);
  --cs-sidebar-border: rgba(148, 163, 184, 0.16);
}

/* =============================================================================
 * Semantic tokens - dark theme
 * =============================================================================
 * Intent colours shift to the light end of each ramp so coloured text keeps
 * AA contrast on dark surfaces, while solid fills move one step brighter and
 * pair with a dark "on-" foreground.
 * ========================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;

  --cs-canvas: #0b1020;
  --cs-surface: #141a2e;
  --cs-surface-subtle: #1a2137;
  --cs-surface-sunken: #0f1526;
  --cs-surface-hover: #202942;

  --cs-glass: rgba(20, 26, 46, 0.72);
  --cs-glass-border: rgba(148, 163, 184, 0.12);

  --cs-ambient-1: rgba(91, 79, 232, 0.22);
  --cs-ambient-2: rgba(29, 95, 224, 0.16);
  --cs-ambient-3: rgba(16, 185, 129, 0.08);

  --cs-text: #e8edf7;
  --cs-text-muted: #9aa8c2;
  --cs-text-subtle: #75839e;
  --cs-text-inverse: var(--cs-neutral-900);

  --cs-border: #2a334d;
  --cs-border-strong: #3a4664;
  --cs-border-subtle: #1e2740;

  --cs-primary: var(--cs-purple-400);
  --cs-primary-hover: var(--cs-purple-300);
  --cs-primary-active: var(--cs-purple-200);
  --cs-primary-soft: rgba(139, 120, 240, 0.16);
  --cs-primary-soft-hover: rgba(139, 120, 240, 0.26);
  --cs-primary-border: rgba(139, 120, 240, 0.38);
  --cs-primary-text: var(--cs-purple-200);
  --cs-on-primary: #120e2c;

  --cs-secondary: var(--cs-blue-400);
  --cs-secondary-hover: var(--cs-blue-300);
  --cs-secondary-active: var(--cs-blue-200);
  --cs-secondary-soft: rgba(96, 154, 250, 0.15);
  --cs-secondary-soft-hover: rgba(96, 154, 250, 0.25);
  --cs-secondary-border: rgba(96, 154, 250, 0.36);
  --cs-secondary-text: var(--cs-blue-200);
  --cs-on-secondary: #08182f;

  --cs-tertiary: var(--cs-green-400);
  --cs-tertiary-hover: var(--cs-green-300);
  --cs-tertiary-active: var(--cs-green-200);
  --cs-tertiary-soft: rgba(52, 211, 153, 0.14);
  --cs-tertiary-soft-hover: rgba(52, 211, 153, 0.24);
  --cs-tertiary-border: rgba(52, 211, 153, 0.34);
  --cs-tertiary-text: var(--cs-green-200);
  --cs-on-tertiary: #04231a;

  --cs-warning: var(--cs-orange-400);
  --cs-warning-hover: var(--cs-orange-300);
  --cs-warning-soft: rgba(251, 146, 60, 0.14);
  --cs-warning-soft-hover: rgba(251, 146, 60, 0.24);
  --cs-warning-border: rgba(251, 146, 60, 0.34);
  --cs-warning-text: var(--cs-orange-200);
  --cs-on-warning: #2a1405;

  --cs-danger: var(--cs-red-400);
  --cs-danger-hover: var(--cs-red-300);
  --cs-danger-active: var(--cs-red-200);
  --cs-danger-soft: rgba(248, 113, 113, 0.14);
  --cs-danger-soft-hover: rgba(248, 113, 113, 0.24);
  --cs-danger-border: rgba(248, 113, 113, 0.34);
  --cs-danger-text: var(--cs-red-200);
  --cs-on-danger: #2c0b0b;

  --cs-neutral-soft: rgba(148, 163, 184, 0.12);
  --cs-neutral-soft-hover: rgba(148, 163, 184, 0.2);
  --cs-neutral-border: #3a4664;
  --cs-neutral-text: #c7d2e5;

  --cs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --cs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.36), 0 1px 2px rgba(0, 0, 0, 0.24);
  --cs-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.42), 0 2px 4px rgba(0, 0, 0, 0.28);
  --cs-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.32);

  --cs-focus-ring: 0 0 0 3px rgba(139, 120, 240, 0.4);

  --cs-sidebar-bg-from: #151233;
  --cs-sidebar-bg-to: #0a0f22;
  --cs-sidebar-text: rgba(203, 213, 225, 0.72);
  --cs-sidebar-text-active: #ffffff;
  --cs-sidebar-active-bg: rgba(139, 120, 240, 0.24);
  --cs-sidebar-border: rgba(148, 163, 184, 0.12);
}