/**
 * solostore-tokens.css
 *
 * All design tokens for the Solostore platform.
 * Edit this file to retheme everything — never hardcode colours or
 * typography in component CSS.
 *
 * Included by: index.html, onboarding.html, auth-error.html
 * and any future platform pages.
 */

:root {

  /* ── Palette ─────────────────────────────────
     Inspired by Headorn: warm off-white on deep black,
     gold accent. Swap these 5 values to retheme entirely.
  ─────────────────────────────────────────────── */
  --c-bg:          #0A0A0A;       /* page background */
  --c-surface:     #111111;       /* card / panel background */
  --c-surface-2:   #191919;       /* nested surface, hover state */
  --c-border:      rgba(250,250,248,0.09);  /* subtle border */
  --c-border-md:   rgba(250,250,248,0.18);  /* medium border */

  --c-text:        #FAFAF8;       /* primary text */
  --c-muted:       #7A7672;       /* secondary / hint text */
  --c-muted-light: rgba(250,250,248,0.55);  /* on-dark muted */

  --c-accent:      #C8A96E;       /* gold — primary accent */
  --c-accent-dark: #A8893E;       /* accent hover / pressed */
  --c-success:     #4CAF7D;       /* success states */
  --c-error:       #E05252;       /* error states */
  --c-warning:     #D4882A;       /* warning states */

  --c-white:       #FAFAF8;       /* true near-white */
  --c-black:       #0A0A0A;       /* true near-black */

  /* Stripe brand — do not change */
  --c-stripe:      #635BFF;

  /* ── Typography ──────────────────────────────
     Two faces: display (serif) + body (sans).
     Both pull from Google Fonts loaded in each HTML file.
  ─────────────────────────────────────────────── */
  --f-display:     'DM Serif Display', Georgia, serif;
  --f-body:        'DM Sans', system-ui, sans-serif;

  /* ── Type scale ──────────────────────────────
     Use clamp() at component level where fluid sizing needed.
  ─────────────────────────────────────────────── */
  --fs-xs:   0.6875rem;   /* 11px */
  --fs-sm:   0.75rem;     /* 12px */
  --fs-base: 0.875rem;    /* 14px */
  --fs-md:   1rem;        /* 16px */
  --fs-lg:   1.125rem;    /* 18px */
  --fs-xl:   1.375rem;    /* 22px */
  --fs-2xl:  1.75rem;     /* 28px */
  --fs-3xl:  2.25rem;     /* 36px */

  /* ── Spacing ─────────────────────────────────
     4px base grid.
  ─────────────────────────────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* ── Radii ───────────────────────────────────*/
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-full: 9999px;

  /* ── Elevation / shadows ─────────────────────*/
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);

  /* ── Transitions ─────────────────────────────*/
  --tr:         0.2s ease;
  --tr-slow:    0.4s ease;

  /* ── Layout ──────────────────────────────────*/
  --max-w:      1200px;
  --nav-h:      64px;

}