/* ==========================================================================
   NOVAURA — Design Tokens
   Extracted from the approved Base44 design. This file is the single source
   of truth for every colour, type step, space, radius, shadow and easing
   value on the site. No component file may hardcode any of these values.
   ========================================================================== */

:root {

  /* --- Core surface & ink ------------------------------------------------ */
  --nva-bg:              #F9F9F9; /* page background — never pure white */
  --nva-ink:             #000000; /* matte black */
  --nva-ink-hover:       #262626; /* charcoal — solid, so button hover contrast
                                     never depends on what is behind it.
                                     White on #262626 is ~13.5:1. */
  --nva-surface:         #FFFFFF; /* cards, panels */
  --nva-surface-muted:   #F5F5F5;
  --nva-ink-muted:       #616161; /* secondary body copy */
  --nva-line:            #E5E5E5; /* hairlines, borders, inputs */

  /* Ink at opacity — used constantly in the reference design */
  --nva-ink-85:          rgba(0,0,0,0.85);
  --nva-ink-70:          rgba(0,0,0,0.70);
  --nva-ink-65:          rgba(0,0,0,0.65);
  --nva-ink-60:          rgba(0,0,0,0.60);
  --nva-ink-55:          rgba(0,0,0,0.55);
  --nva-ink-50:          rgba(0,0,0,0.50);
  --nva-ink-45:          rgba(0,0,0,0.45);
  --nva-ink-40:          rgba(0,0,0,0.40);
  --nva-ink-35:          rgba(0,0,0,0.35);
  --nva-ink-30:          rgba(0,0,0,0.30);
  --nva-ink-25:          rgba(0,0,0,0.25);
  --nva-ink-20:          rgba(0,0,0,0.20);
  --nva-ink-10:          rgba(0,0,0,0.10);
  --nva-ink-05:          rgba(0,0,0,0.05);

  /* --- Brand accents ----------------------------------------------------- */
  /* Logo itself remains monochrome. These are UI accents only. */
  --nva-red:             #B91C1C; /* NOVAURA red — structural accent */
  --nva-red-hover:       #A11717;
  --nva-red-rating:      #8B1A1A;
  --nva-red-rating-hi:   #A52424;
  --nva-red-policy:      #B4302D;
  --nva-rose:            #A33C3C;
  --nva-rose-soft:       #B85C5C;

  --nva-gold:            #C5A059; /* champagne */
  --nva-gold-partner:    #C9A85A;
  --nva-gold-hi:         #E6CF94;

  --nva-blue:            #6D8FB9; /* muted blue — eyebrows, hero rule, focus */

  /* --- Dark surfaces ----------------------------------------------------- */
  --nva-black:           #000000;
  --nva-near-black:      #0A0A0A; /* account sidebar, offer cards */
  --nva-footer-text:     #AFAFAF;
  --nva-footer-rule:     #222222;
  --nva-on-dark:         #FFFFFF;
  --nva-on-dark-90:      rgba(255,255,255,0.90);
  --nva-on-dark-80:      rgba(255,255,255,0.80);
  --nva-on-dark-45:      rgba(255,255,255,0.45);
  --nva-on-dark-10:      rgba(255,255,255,0.10);
  --nva-on-dark-08:      rgba(255,255,255,0.08);
  --nva-on-dark-06:      rgba(255,255,255,0.06);

  /* --- Semantic / status ------------------------------------------------- */
  --nva-pending-bg:      #FEF3C7;  --nva-pending-fg:   #92400E;
  --nva-approved-bg:     #D1FAE5;  --nva-approved-fg:  #065F46;
  --nva-neutral-bg:      #F3F4F6;  --nva-neutral-fg:   #525252;
  --nva-delivered-bg:    #DFF4E5;  --nva-delivered-fg: #1F7A3A;
  --nva-delivered-line:  #C5E8D0;
  --nva-transit-bg:      #F5F1E8;  --nva-transit-fg:   #8A6D3B;
  --nva-transit-line:    #E8DCC4;
  --nva-success-bg:      #D4EDDA;  --nva-success-fg:   #155724;

  /* --- Typography -------------------------------------------------------- */
  /* NovaSerif is a composite family: Cormorant Garamond renders letters,
     Inter renders digits and currency. See fonts.css. */
  --nva-font-display: 'NovaSerif', Georgia, 'Times New Roman', serif;
  --nva-font-heading: 'NovaSerif', Georgia, 'Times New Roman', serif;
  --nva-font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid heading scale — clamp values taken directly from the reference */
  --nva-t-hero:        clamp(3rem, 8.5vw, 8rem);
  --nva-t-hero-sub:    clamp(1.5rem, 2.4vw, 2.1rem);
  --nva-t-page:        clamp(2.8rem, 5.6vw, 5rem);
  --nva-t-page-sm:     clamp(2.6rem, 5vw, 4rem);
  --nva-t-product:     clamp(2.86rem, 4.84vw, 4.4rem);
  --nva-t-section:     clamp(2.2rem, 4vw, 3.4rem);
  --nva-t-section-sm:  clamp(2rem, 3.4vw, 2.8rem);
  --nva-t-accordion:   clamp(1.5rem, 2.4vw, 2rem);
  --nva-t-panel:       clamp(1.7rem, 2.5vw, 2.1rem);

  /* Body steps */
  --nva-t-lead:        1.0625rem; /* 17px */
  --nva-t-body:        0.9375rem; /* 15px */
  --nva-t-small:       0.8125rem; /* 13px */
  --nva-t-micro:       0.75rem;   /* 12px */
  --nva-t-nano:        0.6875rem; /* 11px */

  /* Line heights */
  --nva-lh-tight:      1.05;
  --nva-lh-heading:    1.1;
  --nva-lh-body:       1.7;
  --nva-lh-relaxed:    1.85;

  /* Letter-spacing — the signature of the brand */
  --nva-ls-tight:      -0.01em;
  --nva-ls-nav:        0.08em;
  --nva-ls-nav-dark:   0.14em;
  --nva-ls-label:      0.12em;
  --nva-ls-button:     0.14em;
  --nva-ls-eyebrow:    0.22em;
  --nva-ls-wide:       0.28em;

  /* Weights */
  --nva-w-light:   300;
  --nva-w-regular: 400;
  --nva-w-medium:  500;
  --nva-w-semi:    600;
  --nva-w-bold:    700;
  --nva-w-heavy:   800;

  /* --- Spacing ----------------------------------------------------------- */
  --nva-s-1:  0.25rem;
  --nva-s-2:  0.5rem;
  --nva-s-3:  0.75rem;
  --nva-s-4:  1rem;
  --nva-s-5:  1.25rem;
  --nva-s-6:  1.5rem;
  --nva-s-7:  1.75rem;
  --nva-s-8:  2rem;
  --nva-s-9:  2.25rem;
  --nva-s-10: 2.5rem;
  --nva-s-12: 3rem;
  --nva-s-14: 3.5rem;
  --nva-s-16: 4rem;
  --nva-s-20: 5rem;
  --nva-s-24: 6rem;
  --nva-s-28: 7rem;
  --nva-s-32: 8rem;
  --nva-s-48: 12rem;
  --nva-s-36: 9rem;
  --nva-s-40: 10rem;

  /* Section rhythm — responsive, overridden at breakpoints below */
  --nva-section-y:      var(--nva-s-16);
  --nva-section-y-lg:   var(--nva-s-24);
  --nva-gutter:         var(--nva-s-5);

  /* --- Content widths ---------------------------------------------------- */
  --nva-w-shop:    1920px;
  --nva-w-wide:    1600px;
  --nva-w-content: 1400px;
  --nva-w-footer:  1300px;
  --nva-w-help:    1100px;
  --nva-w-prose:   48rem;

  /* --- Header ------------------------------------------------------------ */
  --nva-header-h:        76px;
  --nva-header-h-dark:   72px;
  /* Offset used by pages that do NOT have a full-bleed hero behind the header */
  --nva-header-offset:   calc(var(--nva-header-h) + var(--nva-s-16));

  /* --- Radii ------------------------------------------------------------- */
  --nva-r-xs:   3px;
  --nva-r-sm:   6px;
  --nva-r-md:   12px;
  --nva-r-lg:   14px;
  --nva-r-xl:   18px;
  --nva-r-2xl:  20px;
  --nva-r-full: 9999px;

  /* --- Shadows — long, soft, low opacity. Never a default box-shadow. ---- */
  --nva-shadow-card-hover:     0 24px 48px -18px rgba(0,0,0,0.18);
  --nva-shadow-feature-hover:  0 30px 56px -18px rgba(0,0,0,0.20);
  --nva-shadow-lab-hover:      0 24px 48px -16px rgba(0,0,0,0.14);
  --nva-shadow-panel:          0 4px 30px -12px rgba(0,0,0,0.08);
  --nva-shadow-image:          0 18px 44px -20px rgba(0,0,0,0.18);

  /* --- Motion ------------------------------------------------------------ */
  --nva-ease:          cubic-bezier(0.22, 1, 0.36, 1); /* expo-out — the brand curve */
  --nva-d-fast:        200ms;
  --nva-d-base:        300ms;
  --nva-d-slow:        500ms;
  --nva-d-drawer:      280ms;
  --nva-d-reveal:      800ms;

  /* --- Layering ---------------------------------------------------------- */
  --nva-z-header:  50;
  --nva-z-drawer:  60;
  --nva-z-overlay: 70; /* age gate — Phase 9 */
}

/* Header grows at the major breakpoint (1024px). This is the single most
   important breakpoint in the design: desktop nav appears here.

   ORDERING — KNOWN, DELIBERATE.
   This block precedes the 768px block below, so at 1024px+ both match and
   the later 768px rule wins on source order. The practical effect is that
   --nva-gutter resolves to s-12 (3rem) on desktop, not the s-16 written
   here, and --nva-header-h resolves to 96px, not 128px.

   The gutter is NOT corrected, on purpose. box-sizing is border-box, so
   padding eats into max-width: raising the gutter to 4rem would narrow
   every .nva-container by 32px at every desktop width — and every page has
   been designed and signed off against the current 3rem. Correcting it is a
   site-wide layout change, not a bug fix, and belongs in its own pass.

   The header heights below ARE restated in the 768px block so the intended
   1024px value still wins, rather than relying on this ordering. */
@media (min-width: 1024px) {
  :root {
    --nva-header-h:      128px;
    --nva-header-h-dark: 112px;
    --nva-section-y:     var(--nva-s-24);
    --nva-gutter:        var(--nva-s-16);
    --nva-header-offset: calc(var(--nva-header-h) + var(--nva-s-16));
  }
}

@media (min-width: 768px) {
  :root {
    --nva-gutter: var(--nva-s-12);

    /*
     * Tablet header tier.
     *
     * Without this the header was pixel-identical from 375px to 1023px,
     * then jumped to 128px at 1024px. 96px sits proportionally between the
     * two so a tablet no longer renders a phone header.
     *
     * NOTE: this block deliberately still follows the 1024px block below in
     * source order. See the comment there — the ordering is a known issue
     * that is being left alone on purpose.
     */
    --nva-header-h:      96px;
    --nva-header-h-dark: 92px;
  }
}

/* --------------------------------------------------------------------------
   Desktop header height — restated last

   The 768px block above would otherwise override the 1024px values through
   source order. Restating them here keeps the intended desktop header
   without touching the gutter ordering, which is a separate decision.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root {
    --nva-header-h:      128px;
    --nva-header-h-dark: 112px;
  }
}