/* ============================================================
   gofind.one — Design Tokens
   ============================================================
   Born from a Greyhound ticket bought in spring 1989. The drop, not the
   destination. Teal is the water. Bebas is the wordmark.
   Source Serif 4 carries the editorial body. Film grain over
   everything. No purple gradients. No startup.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..700;1,8..60,200..700&family=IBM+Plex+Mono:wght@300;400;500&display=swap');

:root {
  /* ---------- TYPEFACES ---------- */
  --font-display: 'Bebas Neue', 'Anton', 'Oswald', sans-serif;
  --font-serif:   'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Serif 4', Georgia, serif;
  --font-mono:    'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --font-sans:    'Source Serif 4', Georgia, serif; /* deliberate — serif is our UI font */

  /* ---------- WEIGHTS ---------- */
  --weight-extralight: 200;
  --weight-light:      300;
  --weight-normal:     400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;

  /* ---------- TYPE SCALE ---------- */
  /* Display sizes assume Bebas — very tall, very condensed */
  --text-wordmark: clamp(3.2rem, 9vw, 7.5rem); /* the wordmark */
  --text-hero:     clamp(2.8rem, 7vw, 5.5rem); /* page heroes in Bebas */
  --text-display:  clamp(2rem, 4.5vw, 3.5rem); /* section displays */
  --text-4xl:      2.5rem;
  --text-3xl:      2rem;
  --text-2xl:      1.5rem;
  --text-xl:       1.25rem;
  --text-lg:       1.125rem;
  --text-md:       1rem;
  --text-base:     0.9375rem; /* 15px — editorial body */
  --text-sm:       0.8125rem;
  --text-xs:       0.6875rem; /* eyebrows, fine print */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.45;
  --leading-relaxed: 1.6;
  --leading-loose:   1.8;

  /* Tracking — generous for Bebas wordmarks, tight for body */
  --tracking-tight:    -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.06em;   /* wordmarks */
  --tracking-wider:    0.12em;   /* tagline */
  --tracking-widest:   0.18em;   /* eyebrows */
  --tracking-eyebrow:  0.22em;   /* ALL CAPS labels */

  /* ============================================================
     COLOR — DARK (primary surface, the placeholder, marketing)
     ============================================================ */

  /* Base — near-black with a cool dusk undertone */
  --dark-bg:           #0a0a0a;  /* placeholder background */
  --dark-bg-elevated:  #111111;
  --dark-bg-surface:   #161616;  /* card */
  --dark-bg-mid:       #1c1c1c;  /* secondary card */
  --dark-bg-warm:      #14110e;  /* sunset-tinted variant */

  /* Foreground — warm off-white, never pure white */
  --dark-fg:           #f4f1ec;  /* primary text */
  --dark-fg-body:      #e5e1d8;  /* body */
  --dark-fg-muted:     #9a948a;  /* secondary text */
  --dark-fg-dim:       #6b665e;  /* tertiary, metadata */
  --dark-fg-dimmer:    #4a4641;  /* very low contrast */
  --dark-fg-dimmest:   #2b2825;  /* hairlines on text */

  /* Borders — hairline, low contrast */
  --dark-border:        rgba(244, 241, 236, 0.08);
  --dark-border-mid:    rgba(244, 241, 236, 0.14);
  --dark-border-strong: rgba(244, 241, 236, 0.22);

  /* THE TEAL — sparingly. Light on water, not a brand color. */
  --teal:              #5ec8c8;
  --teal-bright:       #7ed6d6;  /* hover */
  --teal-deep:         #3fa8a8;  /* pressed */
  --teal-soft:         rgba(94, 200, 200, 0.16);
  --teal-glow:         rgba(94, 200, 200, 0.35);
  --teal-hairline:     rgba(94, 200, 200, 0.28);

  /* ============================================================
     COLOR — LIGHT (interior surfaces, briefs, dashboards)
     Warm parchment. Like a competition entry form, a race bib.
     ============================================================ */

  --light-bg:           #f3efe7;  /* warm parchment */
  --light-bg-elevated:  #ebe6dc;
  --light-bg-surface:   #ffffff;  /* full white reserved for cards */
  --light-bg-mid:       #e5dfd2;  /* sand */
  --light-bg-warm:      #f7e9d5;  /* sunset-tinted variant */

  --light-fg:           #14110e;  /* near-black, warm */
  --light-fg-body:      #2a2620;
  --light-fg-muted:     #6b655c;
  --light-fg-dim:       #948e83;
  --light-fg-dimmer:    #c5beb1;

  --light-border:        rgba(20, 17, 14, 0.10);
  --light-border-mid:    rgba(20, 17, 14, 0.18);
  --light-border-strong: rgba(20, 17, 14, 0.30);

  /* Teal — slightly deepened for light backgrounds to hold weight */
  --teal-on-light:        #2ea3a3;
  --teal-on-light-bright: #1f8f8f;
  --teal-on-light-soft:   rgba(46, 163, 163, 0.10);

  /* ============================================================
     SEMANTIC — competition mechanics specific to this platform
     ============================================================ */

  /* Prize / money — warm sand/gold. Not aggressive yellow.
     Looks like real money in soft light, like the white surf
     tank top bought in Tulsa. */
  --prize:             #d4b87a;
  --prize-bright:      #e3c98a;
  --prize-soft:        rgba(212, 184, 122, 0.14);
  --prize-on-light:    #8b6f2e;

  /* Live / active — the teal, the water */
  --live:              var(--teal);

  /* Urgent (deadline pressure) — dusk amber, not red */
  --urgent:            #d4936a;
  --urgent-soft:       rgba(212, 147, 106, 0.16);
  --urgent-on-light:   #a35a2a;

  /* Closed / ended — neutral grey */
  --closed:            #6b665e;
  --closed-on-light:   #948e83;

  /* Error — muted red, never pure red */
  --error:             #c46a5e;
  --error-soft:        rgba(196, 106, 94, 0.16);
  --error-on-light:    #8b3a2e;

  /* Success — uses teal. There is one path. */
  --success:           var(--teal);

  /* ============================================================
     SPACING — generous, editorial, cinematic
     ============================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ============================================================
     RADII — minimal. The brand is sharp.
     Race bibs aren't pill-shaped. Entry forms have square corners.
     ============================================================ */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   3px;   /* buttons, tags */
  --radius-md:   4px;   /* cards */
  --radius-lg:   6px;   /* featured cards */
  --radius-xl:   10px;  /* sparingly — major surfaces */

  /* ============================================================
     ELEVATION — no traditional shadows.
     Depth is hairline borders, layered surfaces, and the grain.
     Reserved 'glow' for teal active states only.
     ============================================================ */
  --elev-none:  none;
  --elev-glow:  0 0 24px rgba(94, 200, 200, 0.25);
  --elev-glow-strong: 0 0 32px rgba(94, 200, 200, 0.40);
  /* For the rare case we need atmospheric depth (modals over the
     cinematic background), use a very soft warm-black bloom: */
  --elev-bloom: 0 24px 80px -20px rgba(0, 0, 0, 0.65);

  /* ============================================================
     MOTION — slow. Cinematic. No bounces.
     ============================================================ */
  --ease-drift:  cubic-bezier(0.16, 1, 0.3, 1);   /* the rise */
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95);

  --dur-instant:  120ms;
  --dur-fast:     220ms;
  --dur-normal:   400ms;
  --dur-slow:     900ms;
  --dur-rise:     1400ms;   /* the wordmark rise */
  --dur-drift:    18000ms;  /* the background drift */

  /* ============================================================
     LAYOUT
     ============================================================ */
  --content-narrow:   640px;   /* prose */
  --content-editorial: 860px;  /* the brief, a problem detail */
  --content-wide:     1100px;  /* dashboards */
  --content-max:      1440px;

  /* ============================================================
     SEMANTIC ALIASES (default to dark theme)
     ============================================================ */
  --bg:           var(--dark-bg);
  --bg-elevated:  var(--dark-bg-elevated);
  --bg-surface:   var(--dark-bg-surface);
  --bg-mid:       var(--dark-bg-mid);

  --fg:           var(--dark-fg);
  --fg-body:      var(--dark-fg-body);
  --fg-muted:     var(--dark-fg-muted);
  --fg-dim:       var(--dark-fg-dim);
  --fg-dimmer:    var(--dark-fg-dimmer);

  --border:        var(--dark-border);
  --border-mid:    var(--dark-border-mid);
  --border-strong: var(--dark-border-strong);

  --accent:        var(--teal);
  --accent-bright: var(--teal-bright);
  --accent-soft:   var(--teal-soft);
  --accent-glow:   var(--teal-glow);

  /* Card defaults */
  --card-bg:      var(--dark-bg-surface);
  --card-border:  var(--dark-border);
  --card-hover:   rgba(244, 241, 236, 0.04);
}

/* ============================================================
   LIGHT THEME — opt-in via class, not media query.
   The cinematic dark is the brand default.
   ============================================================ */
.theme-light {
  --bg:           var(--light-bg);
  --bg-elevated:  var(--light-bg-elevated);
  --bg-surface:   var(--light-bg-surface);
  --bg-mid:       var(--light-bg-mid);

  --fg:           var(--light-fg);
  --fg-body:      var(--light-fg-body);
  --fg-muted:     var(--light-fg-muted);
  --fg-dim:       var(--light-fg-dim);
  --fg-dimmer:    var(--light-fg-dimmer);

  --border:        var(--light-border);
  --border-mid:    var(--light-border-mid);
  --border-strong: var(--light-border-strong);

  --accent:        var(--teal-on-light);
  --accent-bright: var(--teal-on-light-bright);
  --accent-soft:   var(--teal-on-light-soft);

  --card-bg:      var(--light-bg-surface);
  --card-border:  var(--light-border);
  --card-hover:   rgba(20, 17, 14, 0.04);

  --prize:        var(--prize-on-light);
  --urgent:       var(--urgent-on-light);
  --closed:       var(--closed-on-light);
  --error:        var(--error-on-light);
}

/* ============================================================
   FILM GRAIN — reusable atmospheric overlay.
   Place an element with class .grain over any surface.
   ============================================================ */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain.subtle { opacity: 0.035; }
.grain.heavy  { opacity: 0.10; }

/* ============================================================
   TYPOGRAPHY DEFAULTS (opt-in via class on body)
   ============================================================ */
.brand-typography {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.brand-typography h1,
.brand-typography .h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-normal);
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  color: var(--fg);
}

.brand-typography h2,
.brand-typography .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-normal);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  color: var(--fg);
}

.brand-typography h3,
.brand-typography .h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--weight-light);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg);
}

.brand-typography .eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.brand-typography .tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-wider);
  color: var(--fg-muted);
}

.brand-typography .mono,
.brand-typography .prize-amount,
.brand-typography .deadline {
  font-family: var(--font-mono);
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-normal);
  font-feature-settings: 'tnum' 1;
}