/* ============================================================
   variables.css — the single source of truth for design tokens.
   Changing a value here changes the entire site.

   ⚠️ THIS IS THE ONLY FILE IN public/assets/css/ ALLOWED TO
   CONTAIN A LITERAL COLOUR. The hex audit enforces it:

       grep -rn "#[0-9a-fA-F]\{3,8\}" public/assets/css/

   must match this file and nothing else. A colour that exists
   only as a token cannot be wrong in one theme, which is what
   makes dark mode work with no per-component effort.

   ── Palette: "Deep Navy Sanctuary" ────────────────────────
   Sampled from the SEC logo. Navy is chrome, teal is action,
   gold is ornament (TECH_DECISIONS #23):

     --color-primary      navy   brand, structure, headings,
                                 navbar, footer, admin chrome
     --color-accent       teal   ALL primary actions, focus
                                 rings, link hover
     --color-accent-decor teal   DECORATIVE FILLS ONLY — this is
                                 the logo teal and it fails
                                 contrast on white at 2.85:1.
                                 NEVER put text on it.
     --color-gold         gold   ornament only — never a button,
                                 never body text

   Contrast, already measured: white on navy 6.70:1, white on
   deep teal 5.22:1. Anything carrying white text uses one of
   those two, never --color-accent-decor.

   An element that must stay white while sitting on a coloured
   surface uses --color-on-primary. Do NOT reach for
   --color-surface: it is theme-dependent and turns dark.
   ============================================================ */

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --color-primary:          #445F74;  /* slate navy */
  --color-primary-hover:    #354B5C;
  --color-primary-soft:     #E4EBF0;
  --color-on-primary:       #FFFFFF;  /* ALWAYS white, both themes */

  --color-accent:           #1F7A63;  /* deep teal — accessible action */
  --color-accent-hover:     #18614E;
  --color-accent-decor:     #34AB8D;  /* logo teal — fills only, no text */
  --color-on-accent:        #FFFFFF;

  --color-gold:             #DAB157;  /* ornament only */

  /* ── Surfaces ──────────────────────────────────────────── */
  --color-bg:               #F5F7F8;
  --color-surface:          #FFFFFF;
  --color-surface-elevated: #FFFFFF;
  --color-surface-cool:     #E7EFF3;  /* alternating band, light mode */

  /* ── Text ──────────────────────────────────────────────── */
  --color-text:             #1B2A33;
  --color-text-muted:       #5A6B76;
  --color-border:           #D6E0E6;

  /* ── Status ────────────────────────────────────────────── */
  --color-success:          #1F7A63;
  --color-warning:          #B4801E;
  --color-error:            #B3261E;
  --color-info:             #445F74;

  /* ── Admin ─────────────────────────────────────────────── */
  --color-admin-bg:         #EDF1F4;

  /* ── Solid status fills for bulk-action buttons ─────────
     Distinct from the status text colours above: these sit
     under white text, so they are darkened accordingly. */
  --color-status-paid-strong:      #1F7A63;
  --color-status-pending-strong:   #B4801E;
  --color-status-cancelled-strong: #5A6B76;
  --color-status-refunded-strong:  #B3261E;

  /* ── CSV export (Excel-green, deliberately off-palette so
        the export action reads as "spreadsheet") ─────────── */
  --color-csv-export:       #1D6F42;
  --color-csv-export-hover: #155A35;

  /* ── Third-party brand colours (not ours to restyle) ───── */
  --color-whatsapp:         #25D366;
  --color-whatsapp-dark:    #1DA851;

  /* ── Overlays — near-black in both themes (lightbox) ───── */
  --color-lightbox-backdrop: rgba(0, 0, 0, 0.9);

  /* ── Hero surface — DELIBERATELY THEME-INVARIANT ─────────
     A photographic hero does not invert with the theme, and it
     carries white text in both. These three are defined only
     here in :root and are NOT overridden in the dark block —
     same reasoning as --color-lightbox-backdrop above.

     ⚠️ Do NOT swap these for --color-primary / --color-accent.
     Those flip to light tints in dark mode, which would put
     white text on a pale surface. That is the defect that hit
     .btn--outline (2.28:1) and still lurks in any rule pairing
     --color-on-primary with --color-primary.

     Measured against white text:
       scrim 66% over a pure-white photo .... 6.09:1
       scrim 76% over a pure-white photo .... 8.9:1
       --color-hero-from ................... 10.09:1
       --color-hero-to ...................... 8.52:1
     so the overlay clears AA over any photograph, including the
     worst case of a blown-out white one. */
  --color-hero-scrim: #0A1218;  /* near-black, the scrim and placeholder base */
  --color-hero-from:  #304454;  /* brand navy #445F74 at 35% scrim */
  --color-hero-to:    #185649;  /* brand deep teal #1F7A63 at 35% scrim */

  /* ── Typography ────────────────────────────────────────── */
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* ── Spacing scale (4px base) ──────────────────────────── */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */

  /* ── Border radius ─────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);

  /* ── Layout constants ──────────────────────────────────── */
  --admin-navbar-height: 97px;  /* topbar (~57px) + nav row (~40px) */
  --site-header-height:  72px;  /* matches .site-header__inner min-height */

  /* ── Transitions ───────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

:root[data-theme="dark"] {
  /* ── Brand — lifted for contrast against the dark ground ── */
  --color-primary:          #8FB0C6;
  --color-primary-hover:    #A6C2D4;
  --color-primary-soft:     #22323D;
  --color-on-primary:       #FFFFFF;

  --color-accent:           #3FC7A3;
  --color-accent-hover:     #5AD6B6;
  --color-accent-decor:     #34AB8D;
  --color-on-accent:        #0F1519;

  --color-gold:             #E5C177;

  /* ── Surfaces ──────────────────────────────────────────── */
  --color-bg:               #0F1519;
  --color-surface:          #18222A;
  --color-surface-elevated: #1F2C35;
  --color-surface-cool:     #22303A;

  /* ── Text ──────────────────────────────────────────────── */
  --color-text:             #E8EEF2;
  --color-text-muted:       #9DAFBB;
  --color-border:           #2C3B45;

  /* ── Admin ─────────────────────────────────────────────── */
  --color-admin-bg:         #12191E;

  /* ── Status — lifted to stay legible on the dark ground ── */
  --color-success:          #3FC7A3;
  --color-warning:          #E0A93C;
  --color-error:            #E86A62;
  --color-info:             #8FB0C6;

  --color-status-paid-strong:      #2E9C80;
  --color-status-pending-strong:   #C08B26;
  --color-status-cancelled-strong: #6F818D;
  --color-status-refunded-strong:  #C2453C;

  /* ── CSV export ────────────────────────────────────────── */
  --color-csv-export:       #2E8A59;
  --color-csv-export-hover: #267548;

  /* ── Shadows — heavier so elevation still reads ────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);
}