/* ============================================================
   TENNNIS — Colors & Type
   ============================================================
   AI agency based in Oslo. "Tennnis" plays on the back-and-forth
   of AI collaboration — ideas volleyed between human & machine.
   Palette: warm Scandinavian paper, court-clay red, fuzzy-ball
   green, ink black. Type: oversized display + humanist sans.
   ============================================================ */

/* ---- Fonts (Google Fonts for now — see README for licensing) ---- */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@300;400;500;600;700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Core Neutrals ---------- */
  --paper:          #f3efe4;   /* hero cream, warm Scandinavian paper */
  --paper-2:        #e8e2d1;   /* secondary surface */
  --paper-3:        #dcd5c1;   /* tertiary / muted card */
  --ink:            #0d0d0d;   /* primary ink — near-black */
  --ink-2:          #2a2a28;   /* secondary ink */
  --ink-3:          #55544f;   /* tertiary ink, body secondary */
  --ink-4:          #8a877e;   /* quaternary, captions */
  --line:           #0d0d0d;   /* rule color */
  --line-soft:      rgba(13,13,13,0.18);

  /* ---------- Brand — Court Palette ---------- */
  --clay:           #c9452c;   /* clay-court red — primary accent */
  --clay-deep:      #9e2f1b;   /* pressed / deep clay */
  --clay-soft:      #e8a897;   /* washed clay, surfaces */
  --clay-wash:      #f5dcd0;   /* pale clay background tint */

  --fuzz:           #d4e34a;   /* tennis-ball fuzzy yellow-green — the signature */
  --fuzz-deep:      #a8b82d;   /* darker fuzz, hover */
  --fuzz-soft:      #e8eea3;   /* pale fuzz, surfaces */
  --fuzz-wash:      #f3f6d8;   /* pale fuzz background tint */

  --court:          #2f6b4a;   /* grass court green, supporting */
  --court-deep:     #1d4630;

  --chalk:          #fafaf5;   /* white line chalk */

  /* ---------- Semantic ---------- */
  --bg:             var(--paper);
  --bg-subtle:      var(--paper-2);
  --bg-inverse:     var(--ink);
  --fg:             var(--ink);
  --fg-2:           var(--ink-3);
  --fg-3:           var(--ink-4);
  --fg-inverse:     var(--paper);
  --accent:         var(--clay);
  --accent-2:       var(--fuzz);
  --success:        var(--court);
  --danger:         var(--clay-deep);

  /* ---------- Type Families ---------- */
  --font-display:   'Bebas Neue', 'Arial Narrow', sans-serif;         /* oversized posters, numerals */
  --font-sans:      'Space Grotesk', 'Inter', system-ui, sans-serif;  /* headlines, UI */
  --font-body:      'DM Sans', system-ui, sans-serif;                 /* long-form reading */
  --font-mono:      'JetBrains Mono', 'SF Mono', monospace;           /* code, tags, small caps */

  /* ---------- Type Scale (px-ish, clamp'd) ---------- */
  --fs-mega:        clamp(5rem, 14vw, 12rem);  /* hero poster */
  --fs-xxl:         clamp(3rem, 8vw, 7rem);    /* section mega */
  --fs-xl:          clamp(2.5rem, 5vw, 4rem);  /* section h2 */
  --fs-lg:          2rem;                       /* h3 */
  --fs-md:          1.3rem;                     /* h4 */
  --fs-body:        1rem;                       /* body */
  --fs-body-lg:     1.25rem;                    /* lead body */
  --fs-sm:          0.9rem;
  --fs-xs:          0.8rem;      /* tag, caption */
  --fs-xxs:         0.72rem;

  /* ---------- Spacing (8pt base, extended) ---------- */
  --s-0:            0;
  --s-1:            4px;
  --s-2:            8px;
  --s-3:            12px;
  --s-4:            16px;
  --s-5:            24px;
  --s-6:            32px;
  --s-8:            48px;
  --s-10:           64px;
  --s-12:           96px;
  --s-16:           160px;

  /* ---------- Radii (mostly square — court geometry) ---------- */
  --r-0:            0;
  --r-1:            2px;     /* sharp, default */
  --r-2:            6px;     /* chips / inputs */
  --r-pill:         999px;   /* capsule buttons, the tennis-ball outline */

  /* ---------- Shadows ---------- */
  --shadow-0:       none;
  --shadow-1:       0 1px 0 rgba(13,13,13,0.06);
  --shadow-2:       0 4px 12px -4px rgba(13,13,13,0.10), 0 1px 0 rgba(13,13,13,0.04);
  --shadow-3:       0 12px 30px -8px rgba(13,13,13,0.18), 0 2px 0 rgba(13,13,13,0.06);
  --shadow-press:   inset 0 1px 0 rgba(13,13,13,0.12);

  /* ---------- Motion ---------- */
  --ease-volley:    cubic-bezier(0.65, 0, 0.35, 1);   /* clean volley — most ui */
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1); /* ball bounce, for playful accents */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1:          160ms;
  --dur-2:          260ms;
  --dur-3:          420ms;
  --dur-4:          700ms;

  /* ---------- Layout ---------- */
  --gutter:         4rem;     /* desktop page gutter */
  --gutter-sm:      2rem;
  --maxw:           1440px;
}

/* ============================================================
   Base Elements — semantic mappings
   ============================================================ */

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Hero poster — the "WE BUILD" scale */
.t-mega, h1.t-mega {
  font-family: var(--font-sans);
  font-size: var(--fs-mega);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

/* H1 — page hero (smaller than mega) */
h1, .t-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-xxl);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

/* H2 — section */
h2, .t-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

/* H3 — card title */
h3, .t-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}

/* H4 — sub-card */
h4, .t-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
}

/* Display numeral — step-01, stat-50+, oversized ornamental */
.t-numeral {
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  letter-spacing: 0.02em;
}
.t-numeral--huge {
  font-family: var(--font-display);
  font-size: clamp(6rem, 14vw, 14rem);
  line-height: 0.85;
}

/* Body */
p, .t-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg-2);
}
.t-body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  color: var(--fg-2);
}

/* Small caps tag — "WHAT WE DO" */
.t-tag, .section-tag {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Mono — code, metadata, marquee timestamp */
code, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: 0;
}

/* Caption */
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xxs);
  color: var(--fg-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Logo lockup */
.t-logo {
  font-family: var(--font-display);
  font-size: 2.5rem;
  letter-spacing: 0.05em;
  text-transform: none;
}