/* =========================================================
   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.
   ========================================================= */

:root {
    /* ===== Brand =====
       --brand is the interactive purple at 5.5:1 contrast on
       white — use this for text, button surfaces, focus rings.
       --brand-display is for surfaces and ≥18px text only;
       below 18px it fails WCAG AA on white.

       The dark end (--brand-darker / --brand-night) and light
       end (--brand-glow / --brand-bright) are the Zyndi-restyle
       extension — see the design handoff for usage. */
    --brand:           #6B48D1;
    --brand-display:   #7C3AED;
    --brand-deep:      #5B21B6;
    --brand-darker:    #2E1065;   /* hero gradient mid-stop */
    --brand-night:     #1A0B3D;   /* hero gradient end-stop, sidebar bottom */
    --brand-glow:      #A78BFA;   /* light purple at 14–22% alpha for glassy fills */
    --brand-bright:    #C4B5FD;   /* eyebrow text on dark, gradient top stop */
    --brand-soft:      #F1EDFA;

    /* ===== Gradients =====
       The heart of the Zyndi restyle. --grad-cta is the primary
       button / hero CTA puffy pill. --grad-hero is the dashboard
       hero + every inner-page subhero. --grad-rail is the
       sidebar rail. */
    --grad-cta:       linear-gradient(180deg, #C4B5FD 0%, #8B5CF6 55%, #6D28D9 100%);
    --grad-cta-hover: linear-gradient(180deg, #B9A6FC 0%, #7C3AED 55%, #5B21B6 100%);
    --grad-hero:      radial-gradient(140% 90% at 18% 0%, #4C1D95 0%, #2E1065 45%, #1A0B3D 100%);
    --grad-rail:      linear-gradient(180deg, #1F0E4A 0%, #150832 100%);

    /* ===== Neutrals ===== */
    --ink:    #0F172A;  /* headings, sidebar background */
    --ink-2:  #1F2937;  /* body */
    --muted:  #6B7280;  /* meta, captions */
    --line:   #E5E7EB;  /* borders */
    --line-2: #F3F4F6;  /* subtle dividers, table headers */
    --surface:#F8F6F1;  /* main content background — cream "page" */
    --paper:  #FFFFFF;  /* card background */

    /* ===== Status =====
       Soft variants are the tinted surfaces for badges and banners. */
    --ok:        #059669;
    --ok-soft:   #ECFDF5;
    --warn:      #D97706;
    --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 ===== */
    --r-sm:   4px;
    --r-md:   8px;
    --r-lg:   12px;
    --r-pill: 999px;

    /* ===== Shadows ===== */
    --shadow-1: 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-2: 0 1px 3px rgba(15, 23, 42, .06), 0 6px 16px rgba(15, 23, 42, .04);
    --shadow-3: 0 18px 40px rgba(15, 23, 42, .12), 0 4px 12px rgba(15, 23, 42, .06);

    /* ===== Type =====
       Sans (Inter) for everything except page titles and stat numerals,
       which use Newsreader at 500. Mono for codes, table headers,
       timestamps, badges, KBD chips. */
    --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --serif: "Newsreader", Georgia, serif;
    --mono:  "JetBrains 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 ===== */
    --sidebar-w:  232px;
    --sidebar-w-collapsed: 56px;
    --topbar-h:   56px;
    --content-x:  32px;
    --content-y:  24px;
}

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