/* =============================================================================
   nxcart-tokens.css  —  NxCart admin design tokens

   The single source of truth for the admin design system (Phase 1 of
   plan-admin-redesign.md). DEFINE-ONLY: this file declares CSS custom
   properties on :root and styles NOTHING. Components (Phase 2+) consume
   these tokens; nothing here changes how a page renders today.

   ─────────────────────────────────────────────────────────────────────────
   TO REBRAND NXCART:  change ONLY the five values in the "BRAND CORE" block
   below. Every other colour in the system — hovers, soft surfaces, focus
   rings, borders, text — is DERIVED from those five with color-mix(), so a
   rebrand is a five-line edit. Do not hard-code hex anywhere else.
   ─────────────────────────────────────────────────────────────────────────

   Load order: linked in views/admin/head-tpl.php BEFORE admin-brand.css and
   nxcart-components.css, so derived tokens are available to both.
============================================================================= */

:root {

    /* =========================================================================
       ★ BRAND CORE ★  —  the only block you edit to rebrand. Five colours.

       Locked 2026-05-26: brick + lava + papaya + near-black + neutral light.
       The legacy deep-space-blue (#003049) and warm cream (#FFF8F0) values
       were retired when the platform topbar shifted to white — they had
       been propagating a blue tint into every heading / border / CTA via
       the color-mix derivations below.
       ========================================================================= */
    --nx-brand-primary:    #C1121F;   /* Brick Red       — buttons, CTAs, highlights, accents   */
    --nx-brand-secondary:  #780000;   /* Lava Burgundy   — logo, headings, nav, brand identity  */
    --nx-brand-accent:     #FDF0D5;   /* Papaya Cream    — explicit brand tints, soft panels    */
    --nx-brand-dark:       #0a0a0a;   /* Near-Black      — body text, dark UI, primary CTA      */
    --nx-brand-light:      #f9fafb;   /* Neutral Light   — main page background                 */
    /* =========================================================================
       Everything below DERIVES from the five above. Don't add raw hex here.
       ========================================================================= */


    /* ---- Derived brand shades (hover / soft) ------------------------------- */
    --nx-primary-hover:    color-mix(in srgb, var(--nx-brand-primary)   85%, #000);
    --nx-primary-soft:     color-mix(in srgb, var(--nx-brand-primary)   10%, #fff);
    --nx-secondary-hover:  color-mix(in srgb, var(--nx-brand-secondary) 82%, #000);

    /* ---- Semantic colour roles (components reference THESE, not the cores) --
       Three text roles only: heading, text, text-muted. Subtle was retired
       2026-05-26 (too low contrast, callsites migrated to text-muted). */
    --nx-color-cta:           var(--nx-brand-dark);                                  /* primary action bg — near-black */
    --nx-color-cta-hover:     color-mix(in srgb, var(--nx-brand-dark) 88%, #fff);     /* hover lightens slightly */
    --nx-color-on-cta:        #ffffff;                                                /* text on a primary button   */
    --nx-color-heading:       var(--nx-brand-dark);        /* h1-h3, section titles, labels */
    --nx-color-text:          var(--nx-brand-dark);        /* body text                  */
    /* Muted text — helper hints, card subtitles, table secondary cells.
       Bumped 55% → 70% on 2026-05-26 because the previous mix landed at
       ~#767676 ≈ 4.48:1 contrast on white, technically BELOW WCAG AA
       4.5:1. New mix ≈ #545454 ≈ 7.8:1 — passes AAA, still reads as
       "muted" against the full near-black --nx-color-text body. */
    --nx-color-text-muted:    color-mix(in srgb, var(--nx-brand-dark) 70%, #fff);
    --nx-color-link:          var(--nx-brand-primary);
    --nx-color-link-hover:    var(--nx-primary-hover);

    /* ---- Surfaces -----------------------------------------------------------
       Cream tint retired 2026-05-26. Tables/accordions/disabled inputs read
       on neutral gray now that the topbar is white. --nx-brand-accent (papaya
       cream) stays defined for explicit brand callouts. */
    --nx-surface-page:        var(--nx-brand-light);       /* app background             */
    --nx-surface-card:        #ffffff;                     /* cards, tables, panels      */
    --nx-surface-tint:        #f9fafb;                     /* table heads, soft sections */
    --nx-surface-hover:       #f3f4f6;                     /* row + chip hover           */

    /* ---- Lines / borders ----------------------------------------------------
       One border weight. --nx-border-strong retired 2026-05-26 — callsites
       migrated to --nx-border. Use a different surface (--nx-surface-tint)
       for emphasis, not a thicker line.
       Density bumped 12% → 17% on 2026-05-26 — the original mix landed at
       ~#e3e3e3 which blended into white cards on bright monitors. 17% ≈
       #d4d4d4 (close to Tailwind gray-300), reads clearly without feeling
       heavy. */
    --nx-border:              color-mix(in srgb, var(--nx-brand-dark) 17%, #fff);

    /* ---- Focus ring ---------------------------------------------------------
       Neutral charcoal — NOT brand red. A red focus ring reads as an error;
       focus must never collide with validation state. The -error variant is
       coral, used only by genuinely-invalid fields. */
    --nx-focus-ring:          color-mix(in srgb, var(--nx-brand-dark) 22%, transparent);
    --nx-focus-ring-error:    color-mix(in srgb, var(--nx-brand-primary) 35%, transparent);

    /* ---- State colours -----------------------------------------------------
       danger derives from the brand (brick — distinct from the near-black CTA).
       success / warning are FUNCTIONAL, not brand colours.
       --nx-success is GREEN as of 2026-05-26 — the "no green" rule was retired.
       Tailwind green-700 (#15803d): readable on white, doesn't fight brick,
       reads as a calm professional success colour (GitHub / Linear style).
       --nx-info / --nx-info-soft retired 2026-05-26 — neutral "info" callouts
       use --nx-color-text-muted + --nx-surface-tint instead. */
    --nx-danger:              var(--nx-brand-primary);     /* destructive — brick */
    --nx-danger-hover:        var(--nx-brand-secondary);   /* lava — darker red for hover */
    --nx-danger-soft:         color-mix(in srgb, var(--nx-brand-primary) 10%, #fff);
    --nx-success:             #15803d;                     /* green — "done / paid / fulfilled" */
    --nx-success-soft:        color-mix(in srgb, #15803d 10%, #fff);
    --nx-warning:             #b45309;                     /* functional amber           */
    --nx-warning-soft:        color-mix(in srgb, #b45309 12%, #fff);


    /* ---- Spacing scale (4px base) ------------------------------------------- */
    --nx-space-1:   0.25rem;   /*  4px */
    --nx-space-2:   0.5rem;    /*  8px */
    --nx-space-3:   0.75rem;   /* 12px */
    --nx-space-4:   1rem;      /* 16px */
    --nx-space-5:   1.5rem;    /* 24px */
    --nx-space-6:   2rem;      /* 32px */
    --nx-space-7:   3rem;      /* 48px */
    --nx-space-8:   4rem;      /* 64px */

    /* ---- Radius scale -------------------------------------------------------
       Tightened (May 2026) — Shopify/Polaris feel. Whole scale shifted down
       one step: cards/modals are now 8px (not the previous pillowy 14px),
       buttons/inputs are 6px. */
    --nx-radius-sm:    4px;    /* inputs, small chips      */
    --nx-radius-md:    6px;    /* buttons, list rows       */
    --nx-radius-lg:    8px;    /* cards, panels, modals    */
    --nx-radius-pill: 999px;   /* badges, pills            */

    /* ---- Elevation / shadow (three steps, no more) -------------------------- */
    --nx-shadow-sm:  0 1px 2px rgba(31, 31, 31, .06);
    --nx-shadow-md:  0 4px 12px -4px rgba(31, 31, 31, .12);
    --nx-shadow-lg:  0 16px 32px -12px rgba(31, 31, 31, .20);

    /* ---- Typography --------------------------------------------------------- */
    --nx-font-sans:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --nx-text-xs:     0.6875rem;  /* 11px — eyebrows, table headers   */
    --nx-text-sm:     0.8125rem;  /* 13px — body, table cells         */
    --nx-text-base:   0.875rem;   /* 14px — default UI text           */
    --nx-text-lg:     1rem;       /* 16px — card titles               */
    --nx-text-xl:     1.25rem;    /* 20px — page titles               */
    --nx-text-2xl:    1.625rem;   /* 26px — hero / dashboard numbers   */

    --nx-leading-tight:   1.2;
    --nx-leading-normal:  1.5;

    --nx-weight-normal:   400;
    --nx-weight-medium:   500;
    --nx-weight-semibold: 600;
    --nx-weight-bold:     700;

    /* ---- Motion --------------------------------------------------------------
       Easing curves matter for "premium". Linear/ease feel cheap; these are
       the curves Linear / Stripe / Vercel use — a crisp standard curve and a
       decelerating curve for entrances (modals, dropdowns, toasts). */
    --nx-ease:            cubic-bezier(.4, 0, .2, 1);    /* standard          */
    --nx-ease-out:        cubic-bezier(.16, 1, .3, 1);   /* decelerate (in)   */
    --nx-transition-fast: .12s var(--nx-ease);
    --nx-transition-base: .2s  var(--nx-ease);
    --nx-transition-slow: .32s var(--nx-ease-out);
}