/* ============================================================
   Great Surf — colors_and_type.css
   Tokens for the directory of SoCal surf shops.
   Drop this in the page and use the vars below.
   ============================================================ */

/* ---- fonts (Google Fonts substitutions — see README) ---- */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============================================================
     COLORS — palette
     ============================================================ */

  /* Paper / canvas — the brand never sits on pure white */
  --foam:        #F4EFE3;   /* default page bg */
  --foam-50:     #FBF8F0;   /* slightly lighter, for cards on foam */
  --paper:       #FFFFFF;   /* true white, only inside cards */
  --sand:        #E8D9B6;   /* warm sand, section dividers */
  --sand-50:     #F0E5C9;   /* tinted alt section bg */
  --mist:        #D8E2E7;   /* tinted neutral — pulls from ocean */
  --sea-glass:   #D9E3D8;   /* tinted neutral — pulls from kelp */

  /* Ink — warm near-black, never pure #000 */
  --ink:         #1A1714;   /* primary text */
  --ink-80:      #3A332C;   /* secondary text */
  --ink-60:      #6B6258;   /* tertiary, captions */
  --ink-40:      #A6A095;   /* disabled, placeholder */
  --ink-20:      #D6D0C2;   /* hairlines on darker bgs */
  --rule:        rgba(26, 23, 20, 0.10);  /* 1px borders */
  --rule-strong: rgba(26, 23, 20, 0.18);

  /* Ocean blues — primary brand color */
  --ocean-deep:  #0E3B53;   /* deep water, primary CTA, link hover */
  --pacific:     #2A6A8B;   /* mid teal, links, accents */
  --pacific-50:  #C9DCE6;   /* tinted bg, focus rings */

  /* Warm accents — used sparingly */
  --sun:         #E8A33D;   /* golden, badges, ratings */
  --sun-50:      #F8E2B5;   /* tinted bg for warnings */
  --sunset:      #D9572C;   /* warm orange-red, "open now" */
  --reef:        #8B3A2E;   /* terracotta, editorial flags */

  /* Earth — supporting */
  --kelp:        #3F5B3A;   /* dark sea green, eco tag */
  --kelp-50:     #D6E0CE;
  --driftwood:   #A57A50;   /* tinted-sunscreen tan, leather, kelp-pod brown */
  --driftwood-50:#DDC3A1;   /* lighter tan, sun-bleached driftwood */

  /* Semantic */
  --color-bg:        var(--foam);
  --color-surface:   var(--paper);
  --color-surface-2: var(--foam-50);
  --color-fg:        var(--ink);
  --color-fg-muted:  var(--ink-60);
  --color-fg-soft:   var(--ink-80);
  --color-link:      var(--pacific);
  --color-link-hover:var(--ocean-deep);
  --color-primary:   var(--ocean-deep);
  --color-primary-fg:var(--foam);
  --color-accent:    var(--sun);
  --color-danger:    var(--sunset);
  --color-success:   var(--kelp);
  --color-rule:      var(--rule);
  --color-focus:     var(--pacific);

  /* ============================================================
     TYPE — families & scale
     ============================================================ */

  --font-display: 'Anton', 'Oswald', 'Impact', sans-serif;
  --font-editorial: 'Newsreader', 'Source Serif Pro', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (rem-based) */
  --t-display-xl: 88px;   /* hero, marketing only */
  --t-display-l:  64px;
  --t-display-m:  48px;
  --t-display-s:  32px;

  --t-h1:         40px;
  --t-h2:         28px;
  --t-h3:         22px;
  --t-h4:         18px;

  --t-body-l:     18px;
  --t-body:       16px;
  --t-body-s:     14px;
  --t-caption:    12px;

  --t-mono:       13px;

  /* Line heights */
  --lh-display:   0.95;
  --lh-tight:     1.15;
  --lh-body:      1.55;
  --lh-cozy:      1.4;

  /* Letter spacing */
  --ls-display:   -0.005em;
  --ls-eyebrow:   0.10em;   /* small uppercase labels */
  --ls-body:      0;

  /* Weights — DM Sans range */
  --w-body:       400;
  --w-medium:     500;
  --w-semi:       600;
  --w-bold:       700;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --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;

  --r-sm:    4px;
  --r-md:    8px;
  --r-lg:    14px;
  --r-pill:  999px;

  --shadow-sm: 0 1px 2px rgba(26, 23, 20, 0.06);
  --shadow-md: 0 6px 18px -8px rgba(26, 23, 20, 0.20);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-hover: 180ms;
  --dur-entrance: 260ms;

  --max-w-page:   1200px;
  --max-w-read:   720px;

  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
}

/* ============================================================
   BASE — element defaults (semantic roles)
   ============================================================ */

html, body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--w-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;       /* Anton is single-weight */
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
  color: var(--color-fg);
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); text-transform: none; letter-spacing: 0; }
h4 { font-size: var(--t-h4); text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: var(--w-semi); }

p {
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
  max-width: 68ch;
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur-hover) var(--ease-out);
}
a:hover { color: var(--color-link-hover); }

small, .caption {
  font-size: var(--t-caption);
  color: var(--color-fg-muted);
  letter-spacing: 0.01em;
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--color-fg-soft);
}

hr {
  border: 0;
  border-top: 1px solid var(--color-rule);
  margin: var(--space-7) 0;
}

::selection {
  background: var(--sun);
  color: var(--ink);
}

/* ============================================================
   UTILITY CLASSES — common roles
   ============================================================ */

.t-display-xl { font-family: var(--font-display); font-size: var(--t-display-xl); line-height: var(--lh-display); text-transform: uppercase; letter-spacing: var(--ls-display); }
.t-display-l  { font-family: var(--font-display); font-size: var(--t-display-l);  line-height: var(--lh-display); text-transform: uppercase; letter-spacing: var(--ls-display); }
.t-display-m  { font-family: var(--font-display); font-size: var(--t-display-m);  line-height: var(--lh-display); text-transform: uppercase; letter-spacing: var(--ls-display); }
.t-display-s  { font-family: var(--font-display); font-size: var(--t-display-s);  line-height: var(--lh-tight);   text-transform: uppercase; letter-spacing: var(--ls-display); }

.t-editorial  { font-family: var(--font-editorial); font-style: italic; font-weight: 400; }
.t-eyebrow    { font-family: var(--font-body); font-size: var(--t-caption); font-weight: var(--w-semi); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--color-fg-muted); }
.t-mono       { font-family: var(--font-mono); font-size: var(--t-mono); }

.t-body-l     { font-size: var(--t-body-l); line-height: var(--lh-body); }
.t-body-s     { font-size: var(--t-body-s); line-height: var(--lh-body); }

.muted        { color: var(--color-fg-muted); }
.soft         { color: var(--color-fg-soft); }

.paper-bg     { background: var(--color-surface); }
.foam-bg      { background: var(--foam); }
.sand-bg      { background: var(--sand); }
.deep-bg      { background: var(--ocean-deep); color: var(--foam); }

/* paper-grain overlay — apply to hero sections */
.grain {
  position: relative;
  isolation: isolate;
}
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}