/* =========================================================
   Plexxa design tokens — single source of truth.

   Imported once in App.razor. NEVER hard-code colours, spacing,
   or radii in component CSS — source from these variables. The
   redesign brief lives in /design_handoff_plexxa_newlook.

   Adding a new role here is fine; adding a one-off hex in a
   `.razor.css` file isn't. If you find yourself wanting one,
   either it belongs in this token set or it doesn't belong in
   the product.

   2026-09: palette, type and shell metrics re-based on the Zyndi
   design system (sister product — ari-mag/zyndi-ai, tailwind.config.ts
   + app/globals.css) so the two apps read as one family:
   forest greens for surfaces, lime for the accent, a warm "paper"
   page, Geist Sans / Geist Mono / Fraunces for type.
   ========================================================= */

:root {
    /* ===== Zyndi source palette =====
       Raw scale, mirrored 1:1 from Zyndi so either codebase can be
       cross-referenced by name. Semantic roles below map onto these. */
    --forest-900: #062815;
    --forest-800: #0A3D1F;
    --forest-700: #145A2C;
    --forest-600: #14642E;   /* Zyndi "platform-email" — link/text green */
    --lime-500:   #7ED321;
    --lime-400:   #9DE34A;
    --lime-300:   #B8EC7C;
    --ink-950:    #0B0F0C;
    --ink-900:    #11161A;
    --ink-800:    #1A1F1B;
    --ink-700:    #2D3431;
    --ink-600:    #4A5250;
    --ink-500:    #6B736F;
    --ink-400:    #9AA19D;
    --ink-300:    #C8CCC9;
    --ink-200:    #E4E7E4;
    --ink-100:    #EFF1EE;
    --ink-50:     #F7F9F6;
    --moss:       #F0F5EC;

    /* ===== Brand =====
       --brand is the interactive green — text links, focus rings,
       active tab underline. --brand-display is for large surfaces.
       The dark end (--brand-darker / --brand-night) drives the hero
       gradient and sidebar; the light end (--brand-glow / --brand-bright)
       is the lime accent used for glassy fills and eyebrow text on dark. */
    /* Plexxa keeps its purple brand; the Zyndi forest/lime scale above is
       retained for reference and for any shared component that wants it.
       Swap the eight --brand* values + the gradients to move between the two. */
    --brand:           #6B48D1;             /* interactive purple, 5.5:1 on white */
    --brand-display:   #7C3AED;             /* surfaces and ≥18px text only */
    --brand-deep:      #5B21B6;
    --brand-darker:    #2E1065;             /* hero gradient mid-stop, sidebar */
    --brand-night:     #1A0B3D;             /* hero gradient end-stop */
    --brand-glow:      #A78BFA;             /* light purple at 12–32% alpha for glassy fills */
    --brand-bright:    #C4B5FD;             /* eyebrow text on dark */
    --brand-soft:      #F1EDFA;             /* badge / tint surface */
    --brand-glow-rgb:  167, 139, 250;       /* for rgba(var(--brand-glow-rgb), .x) */
    --ink-rgb:         11, 15, 12;          /* for hairline borders rgba(var(--ink-rgb), .06) */

    /* ===== Gradients =====
       --grad-cta   primary button on light surfaces (purple, white text)
       --grad-lime  "puffy" light-accent CTA on dark surfaces (hero, sidebar) — dark text
                    (name kept from the Zyndi mapping so plx.css needs no edits)
       --grad-hero  dashboard hero + inner-page subhero
       --grad-rail  sidebar
       --grad-avatar user / workspace initials disc */
    --grad-cta:        linear-gradient(180deg, #C4B5FD 0%, #8B5CF6 55%, #6D28D9 100%);
    --grad-cta-hover:  linear-gradient(180deg, #B9A6FC 0%, #7C3AED 55%, #5B21B6 100%);
    --grad-lime:       linear-gradient(135deg, #DDD6FE 0%, #A78BFA 100%);
    --grad-lime-hover: linear-gradient(135deg, #E4DEFF 0%, #B49DFB 100%);
    --grad-hero:       radial-gradient(120% 140% at 0% 0%, #4C1D95 0%, #2E1065 55%, #1A0B3D 100%);
    --grad-rail:       linear-gradient(180deg, #1F0E4A 0%, #150832 100%);
    --grad-avatar:     linear-gradient(135deg, #2E1065 0%, #A78BFA 100%);

    /* ===== Neutrals ===== */
    --ink:    var(--ink-950);  /* headings */
    --ink-2:  var(--ink-700);  /* body */
    --muted:  var(--ink-500);  /* meta, captions */
    --line:   #E9ECE8;         /* borders — ≈ rgba(11,15,12,.08) on white */
    --line-2: #F3F5F2;         /* subtle dividers, table headers */
    --line-strong: #DDE1DC;    /* input borders — ≈ rgba(11,15,12,.12) */
    --surface:#FAFAF7;         /* main content background — Zyndi "paper" */
    --paper:  #FFFFFF;         /* card background */

    /* ===== Status =====
       Soft variants are the tinted surfaces for badges and banners. */
    --ok:        #059669;
    --ok-soft:   #ECFDF5;
    --warn:      #B45309;
    --warn-soft: #FFFBEB;
    --bad:       #DC2626;
    --bad-soft:  #FEF2F2;

    /* ===== Spacing — 4 px grid ===== */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-6: 24px;
    --s-8: 32px;
    --s-12: 48px;

    /* ===== Radius =====
       Zyndi: inputs / small controls 8, cards 12–14, hero 20, buttons pill. */
    --r-sm:   6px;
    --r-md:   8px;
    --r-lg:   14px;
    --r-xl:   20px;
    --r-pill: 999px;

    /* ===== Shadows (Zyndi tailwind boxShadow: card / lift / hero) ===== */
    --shadow-1: 0 1px 2px rgba(11, 15, 12, .04);
    --shadow-2: 0 14px 28px -14px rgba(11, 15, 12, .2);
    --shadow-3: 0 24px 48px -12px rgba(11, 15, 12, .5);

    /* ===== Type =====
       Sans (Geist) for everything except page titles, hero headlines
       and stat numerals, which use Fraunces. Mono (Geist Mono) for
       eyebrows, codes, table headers, timestamps, badges, KBD chips. */
    --sans:  "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --serif: "Fraunces", ui-serif, Georgia, serif;
    --mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* ===== Type scale ===== */
    --t-xs:   11px;  --t-xs-lh:   1.4;
    --t-sm:   13px;  --t-sm-lh:   1.5;
    --t-base: 14px;  --t-base-lh: 1.55;
    --t-md:   16px;  --t-md-lh:   1.4;
    --t-lg:   20px;  --t-lg-lh:   1.3;
    --t-xl:   24px;  --t-xl-lh:   1.2;
    --t-2xl:  32px;  --t-2xl-lh:  1.15;

    /* ===== Motion =====
       Three durations, three easings, no others.
       quick: hover, focus, button press.
       base:  modal in, drawer slide, tooltip, message slide-in.
       slow:  page transitions, large layout shifts. */
    --motion-quick: 120ms ease-out;
    --motion-base:  220ms cubic-bezier(.2, .8, .2, 1);
    --motion-slow:  380ms cubic-bezier(.4, 0, .2, 1);

    /* ===== Layout tokens (Zyndi app shell: 244 / 72 / 64) ===== */
    --sidebar-w:  244px;
    --sidebar-w-collapsed: 72px;
    --topbar-h:   64px;
    --content-x:  32px;
    --content-y:  24px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-quick: 0ms;
        --motion-base:  0ms;
        --motion-slow:  0ms;
    }
}