/* ============================================================
   YOUR SIGN GUY — Colors & Type
   ------------------------------------------------------------
   Single source of truth for color tokens, typography vars,
   and base element styles. Load this on every page.
   ============================================================ */

/* Google Fonts: Oswald (display, signage-style condensed) + Public Sans (body) */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Public+Sans:ital,wght@0,300..900;1,300..900&display=swap');

:root {
  /* ---------- BISCAY · deep navy / primary brand blue ---------- */
  --biscay-lightest: #e8eaf0;
  --biscay-lighter:  #d1d6e1;
  --biscay-light:    #5e7096;
  --biscay-base:     #193469;   /* PRIMARY */
  --biscay-dark:     #142954;
  --biscay-darker:   #0a142a;
  --biscay-darkest:  #070f1f;

  /* ---------- OLD GOLD · warm metallic accent ---------- */
  --gold-lightest:   #f9f6ec;
  --gold-lighter:    #f4edd9;
  --gold-light:      #dbc07b;
  --gold-base:       #cca643;   /* SECONDARY */
  --gold-dark:       #a38435;
  --gold-darker:     #51421a;
  --gold-darkest:    #3d3114;

  /* ---------- ALIZARIN CRIMSON · red accent ---------- */
  --red-lightest:    #fce8e9;
  --red-lighter:     #f9d2d3;
  --red-light:       #eb6166;
  --red-base:        #e31e25;   /* ACCENT (sparing) */
  --red-dark:        #b5181d;
  --red-darker:      #5a0c0e;
  --red-darkest:     #44090b;

  /* ---------- NEUTRAL ---------- */
  --neutral-lightest:#f2f2f2;
  --neutral-lighter: #dad9d9;
  --neutral-light:   #b5b3b3;
  --neutral-base:    #858080;
  --neutral-dark:    #544d4d;
  --neutral-darker:  #231b1b;
  --neutral-darkest: #0b0202;

  --white:           #ffffff;
  --black:           #0b0202;

  /* =================================================================
     SEMANTIC TOKENS (use these in product code)
     ================================================================= */

  /* surfaces */
  --surface-page:        var(--neutral-lightest);
  --surface-card:        var(--white);
  --surface-raised:      var(--white);
  --surface-sunken:      var(--neutral-lighter);
  --surface-inverse:     var(--biscay-darker);   /* dark hero band */
  --surface-brand:       var(--biscay-base);     /* primary navy */
  --surface-brand-deep:  var(--biscay-dark);

  /* foreground / text */
  --fg-1:                var(--neutral-darker);  /* primary text on light */
  --fg-2:                var(--neutral-dark);    /* secondary */
  --fg-3:                var(--neutral-base);    /* muted / captions */
  --fg-on-brand:         var(--white);           /* text on navy */
  --fg-on-brand-2:       var(--gold-light);      /* gold subhead on navy */
  --fg-link:             var(--biscay-base);
  --fg-link-hover:       var(--red-base);

  /* borders */
  --border-hairline:     var(--neutral-lighter);
  --border-strong:       var(--neutral-light);
  --border-brand:        var(--biscay-base);
  --rule-gold:           var(--gold-base);

  /* status / utility */
  --accent-gold:         var(--gold-base);
  --accent-red:          var(--red-base);
  --focus-ring:          color-mix(in oklab, var(--biscay-base) 60%, transparent);

  /* =================================================================
     TYPOGRAPHY
     ================================================================= */
  --font-display: 'Oswald', 'Impact', 'Helvetica Neue Condensed', sans-serif;
  --font-body:    'Public Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — display is condensed/uppercase, body is normal case */
  --fs-eyebrow:   12px;
  --fs-caption:   13px;
  --fs-small:     14px;
  --fs-body:      16px;
  --fs-lead:      18px;
  --fs-h6:        18px;
  --fs-h5:        22px;
  --fs-h4:        28px;
  --fs-h3:        36px;
  --fs-h2:        48px;
  --fs-h1:        64px;
  --fs-display:   96px;

  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-normal:    1.5;
  --lh-loose:     1.65;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* =================================================================
     SPACING / RADII / ELEVATION
     ================================================================= */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --radius-sm:   2px;   /* default — signs are mostly squared */
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* Shadows — restrained; signs read flat */
  --shadow-1: 0 1px 2px rgba(10, 20, 42, 0.06), 0 1px 1px rgba(10, 20, 42, 0.04);
  --shadow-2: 0 4px 12px rgba(10, 20, 42, 0.08), 0 2px 4px rgba(10, 20, 42, 0.04);
  --shadow-3: 0 12px 28px rgba(10, 20, 42, 0.14), 0 4px 8px rgba(10, 20, 42, 0.06);
  --shadow-inset: inset 0 0 0 1px rgba(10, 20, 42, 0.06);

  /* Section dividers — gold rule motif */
  --hairline-gold: linear-gradient(to right, transparent, var(--gold-base) 20%, var(--gold-base) 80%, transparent);
}

/* =================================================================
   BASE ELEMENTS
   ================================================================= */
html, body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--biscay-base);
  margin: 0 0 var(--space-4);
  line-height: var(--lh-tight);
}

h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-normal); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); letter-spacing: var(--tracking-caps); }
h6 { font-size: var(--fs-h6); letter-spacing: var(--tracking-caps); }

p { margin: 0 0 var(--space-4); line-height: var(--lh-normal); text-wrap: pretty; }
.lead { font-size: var(--fs-lead); color: var(--fg-2); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--gold-dark);
}

a { color: var(--fg-link); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { color: var(--fg-link-hover); }

code, pre, kbd { font-family: var(--font-mono); font-size: 0.95em; }

::selection { background: var(--gold-light); color: var(--biscay-darker); }