/* =========================================================
   South Coast Pizzas — Colors & Type
   Relaxed surfer vibe, 1950s/60s California surf-club.
   ========================================================= */

/* Google Fonts: Chango (display), Fraunces (headings),
   DM Sans (body), Caveat (hand-drawn accent).
   These are substitutes flagged for user review. */
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,800;0,9..144,900;1,9..144,400;1,9..144,600&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Pacifico&family=Caveat:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand palette (raw) ---------- */
  --scp-sunset-red:    #F06D3F;   /* hot orange-red, signal color */
  --scp-clay:          #EA8044;   /* warm terracotta orange */
  --scp-sand-gold:     #FFD57C;   /* sunlit sand, gold */
  --scp-cream:         #FEF4D3;   /* parchment / paper, warm cream */
  --scp-sea-foam:      #ADDCC1;   /* soft eucalyptus foam */
  --scp-lagoon:        #8DECDA;   /* bright tropical lagoon */
  --scp-teal:          #349595;   /* deep teal, primary brand */
  --scp-deep-navy:     #2E4144;   /* near-black ink, charcoal navy */

  /* ---------- Tints / variants (oklch-derived harmonies) ---------- */
  --scp-teal-dark:     #246b6b;
  --scp-teal-darker:   #184d4d;
  --scp-sunset-deep:   #c8532b;
  --scp-cream-soft:    #fbeec2;   /* slightly warmer cream */
  --scp-paper:         #fffaec;   /* lightest surface */
  --scp-ink-muted:     #4e6366;   /* muted navy */

  /* ---------- Semantic roles ---------- */
  --bg:                var(--scp-cream);         /* page canvas */
  --bg-elevated:       var(--scp-paper);         /* cards */
  --bg-inset:          #f7e7b9;                  /* sunk-in panels */
  --bg-dark:           var(--scp-deep-navy);     /* dark sections */
  --bg-teal:           var(--scp-teal);          /* signature teal */

  --fg:                var(--scp-deep-navy);     /* primary ink */
  --fg-muted:          var(--scp-ink-muted);     /* secondary */
  --fg-subtle:         #7d8e90;
  --fg-on-dark:        var(--scp-cream);         /* on navy/teal */
  --fg-on-teal:        var(--scp-cream);
  --fg-inverse:        var(--scp-paper);

  --accent:            var(--scp-sunset-red);    /* hot action */
  --accent-hover:      var(--scp-sunset-deep);
  --accent-soft:       var(--scp-clay);
  --highlight:         var(--scp-sand-gold);     /* marker highlight */
  --mint:              var(--scp-sea-foam);      /* soft mint fills */
  --lagoon:            var(--scp-lagoon);        /* pop accent */

  --border:            #e6d7a6;                  /* soft hairline */
  --border-strong:     var(--scp-deep-navy);     /* bold chalkboard rules */
  --border-teal:       var(--scp-teal);

  /* ---------- Type families ---------- */
  --font-display:  'Alfa Slab One', 'Ultra', 'Rockwell', Georgia, serif;
  --font-heading:  'Fraunces', 'Playfair Display', Georgia, serif;
  --font-body:     'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-hand:     'Pacifico', 'Yellowtail', 'Caveat', cursive;

  /* ---------- Type scale (rem-based) ---------- */
  --fs-hero:       clamp(3.5rem, 8vw, 6.75rem);   /* display hero */
  --fs-display:    clamp(2.5rem, 5vw, 4.5rem);
  --fs-h1:         clamp(2rem, 4vw, 3.25rem);
  --fs-h2:         clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3:         1.375rem;
  --fs-h4:         1.125rem;
  --fs-body:       1rem;
  --fs-small:      0.875rem;
  --fs-micro:      0.75rem;
  --fs-eyebrow:    0.8125rem;

  /* ---------- Spacing ---------- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- Radii ---------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  32px;
  --r-pill: 999px;
  --r-surf: 48% 48% 48% 48% / 60% 60% 40% 40%;  /* surfboard-like blob */

  /* ---------- Shadows (warm, soft, painterly) ---------- */
  --shadow-xs: 0 1px 0 rgba(46, 65, 68, 0.08);
  --shadow-sm: 0 2px 6px rgba(46, 65, 68, 0.10);
  --shadow-md: 0 8px 18px rgba(46, 65, 68, 0.12), 0 2px 4px rgba(46, 65, 68, 0.06);
  --shadow-lg: 0 18px 36px rgba(46, 65, 68, 0.16), 0 4px 8px rgba(46, 65, 68, 0.08);
  --shadow-stamp: 4px 4px 0 var(--scp-deep-navy);   /* offset sign stamp */
  --shadow-stamp-red: 4px 4px 0 var(--scp-sunset-red);
  --shadow-stamp-teal: 5px 5px 0 var(--scp-teal);
  --shadow-inset: inset 0 2px 6px rgba(46, 65, 68, 0.14);

  /* ---------- Borders ---------- */
  --bw-hair: 1px;
  --bw-line: 2px;
  --bw-bold: 3px;
  --bw-chunk: 4px;

  /* ---------- Motion ---------- */
  --ease-surf:     cubic-bezier(.2, .7, .2, 1);      /* smooth swell */
  --ease-wipeout:  cubic-bezier(.6, -0.28, .74, .05);
  --ease-bob:      cubic-bezier(.45, 1.6, .6, 1);    /* little bounce */
  --dur-fast:      140ms;
  --dur-med:       260ms;
  --dur-slow:      480ms;
}

/* =========================================================
   Base element styles (semantic tags)
   ========================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 0.4em;
}

h2, .h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 0.4em;
  font-variation-settings: "SOFT" 30, "opsz" 72;
}

h3, .h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.2;
  margin: 0 0 0.4em;
  font-variation-settings: "SOFT" 50, "opsz" 36;
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.4em;
}

p { margin: 0 0 1em; max-width: 62ch; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.hand {
  font-family: var(--font-hand);
  font-weight: 600;
  line-height: 1;
}

.display {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
}

small, .small { font-size: var(--fs-small); color: var(--fg-muted); }

a { color: var(--scp-teal); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--scp-teal-dark); }

code, kbd, samp {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, Monaco, monospace;
  font-size: 0.9em;
  background: var(--bg-inset);
  padding: 1px 6px;
  border-radius: var(--r-xs);
}

hr {
  border: 0;
  border-top: var(--bw-line) dashed var(--scp-deep-navy);
  opacity: 0.5;
  margin: var(--s-6) 0;
}

::selection { background: var(--scp-sand-gold); color: var(--scp-deep-navy); }