/* ============================================================
   TOKENS.CSS — Manu Farías portfolio
   Design system: reset, custom properties, base element styles.

   This file is the single source of truth for all design tokens.
   It must be loaded first — before landing.css and cases.css.

   Sections:
   1. Reset
   2. Custom properties (:root)
   3. Base element styles (html, body)
   ============================================================ */

/* ─── 1. RESET ───────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── 2. CUSTOM PROPERTIES ───────────────────────────────────── */

:root {
  /* ── Colors ── */
  --color-dark: #1e1c1a;
  --color-light: #fafafa;
  --color-mid: #6b6560;
  --color-primary: #c05a1f;
  --color-rule: #d9d4cc;
  --color-accent-rule: rgba(74, 102, 112, 0.22);
  --color-accent: #2a5c45;

  /* ── Gray aliases (used by structural components) ── */
  --gray-200: var(--color-rule);
  --gray-400: #a09e98;
  --gray-600: var(--color-mid);

  /* ── Extended palette ── */
  --color-muted: #888;            /* muted text, placeholders, de-emphasized UI */
  --color-border-subtle: #e5e7eb; /* footer border, subtle UI dividers (cooler than --color-rule) */
  --color-chrome: #eceef0;        /* browser frame chrome background */
  --color-linkedin: #0a66c2;      /* LinkedIn brand color — used on hover */

  /* ── Fluid type scale — base 18px ── */
  --size-step--1: clamp(0.875rem, calc(0.84rem + 0.18vw), 0.95rem);
  --size-step-0:  clamp(1rem,     calc(0.96rem + 0.22vw), 1.13rem);
  --size-step-1:  clamp(1.25rem,  calc(1.16rem + 0.43vw), 1.5rem);
  --size-step-2:  clamp(1.56rem,  calc(1.41rem + 0.76vw), 2rem);
  --size-step-3:  clamp(1.95rem,  calc(1.71rem + 1.24vw), 2.66rem);
  --size-step-4:  clamp(2.44rem,  calc(2.05rem + 1.93vw), 3.55rem);

  /* ── Fluid spacing ── */
  --space-3xs:    clamp(0.3125rem, 0.3125rem + 0vw,       0.3125rem);
  --space-2xs:    clamp(0.5625rem, 0.5369rem + 0.1136vw,  0.625rem);
  --space-xs:     clamp(0.875rem,  0.8494rem + 0.1136vw,  0.9375rem);
  --space-s:      clamp(1.125rem,  1.0739rem + 0.2273vw,  1.25rem);
  --space-m:      clamp(1.6875rem, 1.6108rem + 0.3409vw,  1.875rem);
  --space-l:      clamp(2.25rem,   2.1477rem + 0.4545vw,  2.5rem);
  --space-xl:     clamp(3.375rem,  3.2216rem + 0.6818vw,  3.75rem);
  --space-2xl:    clamp(4.5rem,    4.2955rem + 0.9091vw,  5rem);
  --space-3xl:    clamp(6.75rem,   6.4432rem + 1.3636vw,  7.5rem);
  --space-2xl-3xl:clamp(4.5rem,    3.2727rem + 5.4545vw,  7.5rem);
  --space-s-l:    clamp(1.125rem,  0.5625rem + 2.5vw,     2.5rem);

  /* ── Footer type scale ──
     Separate from --size-step-* — the footer was designed at a slightly
     larger base. Prefixed --footer-step-* to avoid collision with the
     --step-index / --step-window animation vars in landing.css. */
  --footer-step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
  --footer-step-0:  clamp(1.125rem,  1.0739rem + 0.2273vw,  1.25rem);
  --footer-step-2:  clamp(1.62rem,   1.4837rem + 0.6057vw,  1.9531rem);
  --footer-step-4:  clamp(2.3328rem, 2.0387rem + 1.3072vw,  3.0518rem);

  /* ── Fonts ── */
  --font-sans: "Geist", system-ui, sans-serif;
  --font-serif: "Literata", Georgia, serif;
}

/* ─── 3. BASE ELEMENT STYLES ─────────────────────────────────── */

html {
  font-size: 112.5%; /* 1rem = 18px */
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* Landing body — page never scrolls, only the drawer does */
body {
  background: var(--color-light);
  color: var(--color-dark);
  font-family: var(--font-sans);
  font-size: var(--size-step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}