/* ==========================================================================
   tokens.css — the single source of the whole look.
   Minimal, light SaaS aesthetic: lots of whitespace, hairline borders,
   restrained colour, soft shadows. Everything is tokenised — never hardcode
   a value elsewhere; use var(--…). Restyling = editing THIS file only.
   ========================================================================== */

:root {
    /* ---- Palette: neutrals — pure-neutral OKLCH ramp (shadcn-aligned) ------
       Zero chroma greys; lightness stops match shadcn's default theme. ------- */
    --color-neutral-0:   oklch(1 0 0);        /* white / background, card     */
    --color-neutral-25:  oklch(0.99 0 0);
    --color-neutral-50:  oklch(0.985 0 0);    /* sidebar, subtle surface      */
    --color-neutral-100: oklch(0.97 0 0);     /* muted / secondary / accent   */
    --color-neutral-150: oklch(0.95 0 0);     /* subtle border                */
    --color-neutral-200: oklch(0.922 0 0);    /* border / input               */
    --color-neutral-300: oklch(0.87 0 0);     /* strong border                */
    --color-neutral-400: oklch(0.708 0 0);    /* ring / faint text            */
    --color-neutral-500: oklch(0.556 0 0);    /* muted-foreground             */
    --color-neutral-600: oklch(0.45 0 0);
    --color-neutral-700: oklch(0.37 0 0);     /* default text                 */
    --color-neutral-800: oklch(0.269 0 0);    /* primary hover                */
    --color-neutral-900: oklch(0.205 0 0);    /* primary                      */
    --color-neutral-950: oklch(0.145 0 0);    /* foreground (headings)        */

    /* Absolute black/white — theme-INDEPENDENT (never flip with light/dark).
       For text/icons on a saturated fill (e.g. status chips) that must stay
       readable in both themes; use --text-on-accent for theme-aware cases. */
    --color-white: #fff;
    --color-black: #000;

    /* ---- Palette: brand (indigo) — used very sparingly (links/active) ----- */
    --color-brand-50:  oklch(0.962 0.018 272);
    --color-brand-100: oklch(0.93 0.034 272);
    --color-brand-200: oklch(0.87 0.065 272);
    --color-brand-400: oklch(0.68 0.16 272);
    --color-brand-500: oklch(0.585 0.2 277);
    --color-brand-600: oklch(0.52 0.23 277);
    --color-brand-700: oklch(0.46 0.22 277);

    /* ---- Palette: status hues (RAG — soft bg + readable fg) --------------- */
    --color-success-50: oklch(0.96 0.04 152);  --color-success-500: oklch(0.7 0.16 152);  --color-success-700: oklch(0.52 0.13 152);
    --color-warning-50: oklch(0.97 0.04 85);   --color-warning-500: oklch(0.78 0.15 75);  --color-warning-700: oklch(0.55 0.12 65);
    --color-danger-50:  oklch(0.96 0.03 27);   --color-danger-500:  oklch(0.62 0.22 27);  --color-danger-700:  oklch(0.51 0.2 27);
    --color-info-50:    oklch(0.96 0.03 255);  --color-info-500:    oklch(0.62 0.18 255); --color-info-700:    oklch(0.52 0.18 257);

    /* ---- Semantic colour roles (use THESE in components) ------------------ */
    --bg-body:        var(--color-neutral-50);   /* slightly off-white canvas  */
    --bg-surface:     var(--color-neutral-0);     /* cards, sidebar, popovers   */
    --bg-surface-alt: var(--color-neutral-50);
    --bg-sunken:      var(--color-neutral-100);   /* muted fills                */
    --bg-hover:       var(--color-neutral-100);

    --border-color:        var(--color-neutral-200);
    --border-color-subtle: var(--color-neutral-150);
    --border-color-strong: var(--color-neutral-300);

    --text-strong:  var(--color-neutral-950);     /* foreground                 */
    --text-default: var(--color-neutral-700);
    --text-muted:   var(--color-neutral-500);     /* muted-foreground           */
    --text-faint:   var(--color-neutral-400);
    --text-on-accent: var(--color-neutral-50);

    /* shadcn: near-black primary; indigo reserved for links/active accents.   */
    --primary:        var(--color-neutral-900);
    --primary-hover:  var(--color-neutral-800);
    --accent:         var(--color-brand-600);
    --accent-hover:   var(--color-brand-700);
    --accent-soft:    var(--color-brand-50);
    /* Focus ring: shadcn uses a 3px translucent ring in the ring colour.      */
    --ring:           var(--color-neutral-400);
    --accent-ring:    color-mix(in srgb, var(--ring) 50%, transparent);

    /* ---- Spacing scale (4px base, fluid where it helps) ------------------- */
    --space-0:  0;
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    /* Fluid page gutter + section rhythm. */
    --space-gutter: clamp(var(--space-4), 2.5vw, var(--space-8));
    --space-section: clamp(var(--space-6), 2vw, var(--space-8));

    /* ---- Typography ------------------------------------------------------- */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;

    /* Fluid type scale. */
    --text-xs:   0.75rem;
    --text-sm:   0.8125rem;
    --text-base: 0.875rem;
    --text-md:   0.9375rem;
    --text-lg:   1.0625rem;
    --text-xl:   clamp(1.125rem, 0.95rem + 0.5vw, 1.375rem);
    --text-2xl:  clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
    --text-3xl:  clamp(1.625rem, 1.25rem + 1.4vw, 2.25rem);

    --font-normal:   400;
    --font-medium:   500;
    --font-semibold: 600;
    --font-bold:     700;

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

    --tracking-tight: -0.014em;
    --tracking-wide:  0.06em;

    /* ---- Radii — shadcn scale derived from --radius (0.625rem / 10px) ------ */
    --radius:      0.625rem;                    /* 10px base                   */
    --radius-xs:   calc(var(--radius) - 6px);   /* 4px                         */
    --radius-sm:   calc(var(--radius) - 4px);   /* 6px                         */
    --radius-md:   calc(var(--radius) - 2px);   /* 8px  — buttons, inputs      */
    --radius-lg:   var(--radius);               /* 10px                        */
    --radius-xl:   calc(var(--radius) + 4px);   /* 14px — cards                */
    --radius-pill: 999px;

    /* ---- Shadows (soft, minimal — shadcn-style xs/sm) --------------------- */
    --shadow-xs: 0 1px 2px 0 oklch(0.145 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 oklch(0.145 0 0 / 0.08), 0 1px 2px -1px oklch(0.145 0 0 / 0.06);
    --shadow-md: 0 4px 12px -2px oklch(0.145 0 0 / 0.08);
    --shadow-lg: 0 10px 30px -5px oklch(0.145 0 0 / 0.12);
    --shadow-focus: 0 0 0 3px var(--accent-ring);

    /* ---- Z-index layers --------------------------------------------------- */
    --z-base: 1;
    --z-sticky: 100;
    --z-sidebar: 200;
    --z-topbar: 300;
    --z-dropdown: 400;
    --z-panel: 500;
    --z-dialog: 600;
    --z-notification: 700;

    /* ---- Layout dimensions ------------------------------------------------ */
    --sidebar-width: 248px;
    --topbar-height: 56px;
    --content-max:   1200px;

    /* Constrained content measures — single-column forms, narrow cards, and the
       min-width of a table column. Use these instead of inline max-width:NNNpx. */
    --measure-xs:  240px;
    --measure-sm:  280px;
    --measure-md:  380px;
    --measure-lg:  480px;
    --measure-xl:  520px;   /* common single-column form / card width */
    --measure-2xl: 760px;   /* wide card */
    --measure-col: 160px;   /* table column min-width */

    /* ---- Motion ----------------------------------------------------------- */
    --transition-fast: 110ms ease;
    --transition-base: 170ms ease;
    --transition-slow: 240ms ease;

    /* ---- Breakpoints (reference values) ----------------------------------- */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
}

/* ==========================================================================
   Dark theme — invert the neutral ramp so every semantic role (built on it)
   flips automatically: dark surfaces, light text, light primary buttons with
   dark text. Status hues get dark-friendly soft backgrounds + brighter text.
   Applied for an explicit choice; a small head script resolves "system" to
   light/dark from the OS before paint, so CSS only needs this one block.
   ========================================================================== */
[data-theme="dark"] {
    color-scheme: dark;

    --color-neutral-0:   oklch(0.21 0 0);     /* cards / surfaces             */
    --color-neutral-25:  oklch(0.205 0 0);
    --color-neutral-50:  oklch(0.18 0 0);      /* body canvas (below cards)    */
    --color-neutral-100: oklch(0.27 0 0);      /* sunken / muted fills         */
    --color-neutral-150: oklch(0.30 0 0);      /* subtle border                */
    --color-neutral-200: oklch(0.32 0 0);      /* border                       */
    --color-neutral-300: oklch(0.40 0 0);      /* strong border                */
    --color-neutral-400: oklch(0.55 0 0);      /* faint text                   */
    --color-neutral-500: oklch(0.68 0 0);      /* muted text                   */
    --color-neutral-600: oklch(0.78 0 0);
    --color-neutral-700: oklch(0.87 0 0);      /* default text                 */
    --color-neutral-800: oklch(0.92 0 0);      /* primary hover                */
    --color-neutral-900: oklch(0.95 0 0);      /* primary (now light)          */
    --color-neutral-950: oklch(0.985 0 0);     /* headings (lightest)          */

    /* Status: dark soft backgrounds + brighter foregrounds for contrast.      */
    --color-success-50: oklch(0.30 0.05 152);  --color-success-700: oklch(0.80 0.14 152);
    --color-warning-50: oklch(0.31 0.05 85);   --color-warning-700: oklch(0.83 0.13 80);
    --color-danger-50:  oklch(0.30 0.07 27);   --color-danger-700:  oklch(0.75 0.17 27);
    --color-info-50:    oklch(0.30 0.05 255);  --color-info-700:    oklch(0.80 0.15 255);

    /* Brand accent reads a touch brighter on dark.                            */
    --color-brand-50: oklch(0.30 0.06 272);

    --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.35);
    --shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.45), 0 1px 2px -1px oklch(0 0 0 / 0.35);
    --shadow-md: 0 6px 16px -4px oklch(0 0 0 / 0.5);
    --shadow-lg: 0 12px 32px -6px oklch(0 0 0 / 0.55);
}

/* Reduce motion — a per-user preference (in addition to the OS setting). */
[data-reduce-motion] *,
[data-reduce-motion] *::before,
[data-reduce-motion] *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
}

/* ---- Admin interface accent (distinct teal, still light & minimal) ------ */
/* Applied via the .theme-admin class on the superadmin shell. */
.theme-admin {
    --primary:       #0f766e;   /* teal */
    --primary-hover: #115e59;
    --accent:        #0d9488;
    --accent-hover:  #0f766e;
    --accent-soft:   #f0fdfa;
}
/* Dark: --text-on-accent flips dark, so the accents lighten (light teal carries
   dark on-accent text) and --accent-soft darkens (so light text reads on it). */
[data-theme="dark"] .theme-admin {
    --primary:       #5eead4;
    --primary-hover: #99f6e4;
    --accent:        #5eead4;
    --accent-hover:  #99f6e4;
    --accent-soft:   #134e4a;   /* dark teal — light text reads on it */
}