/* Vitto Studio — Webfonts
   Display: Tanker (Fontshare) — chunky condensed athletic display, single weight.
   Text:    Gabarito (Google Fonts) — geometric sans, 400–900.
   NOTE: loaded from provider CDNs. Provide binary files (woff2) to self-host. */

@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=tanker@400&display=swap');
/* ============================================================
   VITTO STUDIO — COLOR SYSTEM
   Red, black, white. Disciplined. No blue, purple, pastels, neon.
   ============================================================ */
:root {
  /* --- Core brand --- */
  --red: #D92525;            /* Primary — dominant brand color */
  --black: #000000;
  --off-black: #111111;
  --white: #FFFFFF;
  --cream: #F5F1EA;          /* Warm off-white */
  --grey: #8A8A8A;           /* Muted grey */

  /* --- Red ramp (derived from #D92525) --- */
  --red-50:  #FBEAEA;
  --red-100: #F6D0D0;
  --red-200: #EDA3A3;
  --red-300: #E36B6B;
  --red-400: #DE4747;
  --red-500: #D92525;        /* = --red */
  --red-600: #B31D1D;        /* hover / pressed */
  --red-700: #8F1717;        /* deep red */
  --red-800: #5E0F0F;        /* overlays, shadows */
  --red-900: #3A0909;        /* near-black red, backgrounds */
  --red-950: #200505;

  /* --- Neutral ramp (warm-leaning) --- */
  --n-0:   #FFFFFF;
  --n-25:  #F5F1EA;          /* cream */
  --n-50:  #ECE7DE;
  --n-100: #DDD8CF;
  --n-200: #BFBBB3;
  --n-300: #9A9A9A;
  --n-400: #8A8A8A;          /* muted grey */
  --n-500: #6B6B6B;
  --n-600: #4A4A4A;
  --n-700: #2C2C2C;
  --n-800: #1A1A1A;
  --n-850: #141414;
  --n-900: #111111;          /* off-black */
  --n-950: #000000;

  /* --- Semantic: surfaces (default = light/cream world) --- */
  --bg: var(--cream);
  --bg-deep: var(--n-50);
  --surface: var(--white);
  --surface-2: var(--cream);
  --surface-inverse: var(--off-black);

  /* --- Semantic: text --- */
  --text: var(--off-black);
  --text-strong: var(--black);
  --text-muted: var(--n-500);
  --text-faint: var(--grey);
  --text-inverse: var(--cream);
  --text-on-red: var(--white);

  /* --- Semantic: brand / interactive --- */
  --accent: var(--red);
  --accent-hover: var(--red-600);
  --accent-press: var(--red-700);
  --accent-contrast: var(--white);
  --focus-ring: var(--red);

  /* --- Borders / lines --- */
  --border: rgba(17,17,17,0.14);
  --border-strong: var(--off-black);
  --border-red: var(--red);
  --hairline: rgba(17,17,17,0.08);

  /* --- Status (kept within the red/neutral discipline) --- */
  --success: #1F7A3D;
  --warning: #C77A11;
  --danger: var(--red-600);
}

/* ============================================================
   DARK / ARENA THEME — the default "stadium" surface.
   Apply with class="theme-dark" (or data-theme="dark").
   ============================================================ */
.theme-dark,
[data-theme="dark"] {
  --bg: var(--off-black);
  --bg-deep: var(--black);
  --surface: var(--n-850);
  --surface-2: var(--n-800);
  --surface-inverse: var(--cream);

  --text: var(--cream);
  --text-strong: var(--white);
  --text-muted: var(--n-300);
  --text-faint: var(--grey);
  --text-inverse: var(--off-black);

  --border: rgba(245,241,234,0.16);
  --border-strong: var(--cream);
  --hairline: rgba(245,241,234,0.08);
}
/* ============================================================
   VITTO STUDIO — TYPOGRAPHY
   Display: Tanker — condensed, chunky, athletic. Headlines only.
   Text:    Gabarito — geometric sans. Body, UI, nav, buttons.
   ============================================================ */
:root {
  --font-display: 'Tanker', 'Arial Narrow', 'Haettenschweiler', sans-serif;
  --font-sans: 'Gabarito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weights (Gabarito) */
  --fw-regular: 400; /* @kind other */
  --fw-medium: 500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold: 700; /* @kind other */
  --fw-extrabold: 800; /* @kind other */
  --fw-black: 900; /* @kind other */

  /* Display type scale — Tanker. Big, tight, uppercase. */
  --fs-display-xxl: 128px;
  --fs-display-xl: 96px;
  --fs-display-lg: 72px;
  --fs-display-md: 56px;
  --fs-display-sm: 40px;

  /* Text / UI scale — Gabarito */
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-lead: 20px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;
  --fs-eyebrow: 13px;

  /* Line heights */
  --lh-display: 0.92; /* @kind other */
  --lh-tight: 1.05; /* @kind other */
  --lh-heading: 1.15; /* @kind other */
  --lh-body: 1.55; /* @kind other */
  --lh-relaxed: 1.7; /* @kind other */

  /* Tracking */
  --ls-display: -0.01em; /* @kind other */
  --ls-tight: -0.02em; /* @kind other */
  --ls-normal: 0; /* @kind other */
  --ls-eyebrow: 0.18em; /* @kind other */
  --ls-button: 0.02em; /* @kind other */
}

/* Display helper: uppercase, condensed, tight */
.vitto-display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

/* Eyebrow / kicker label */
.vitto-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}
/* ============================================================
   VITTO STUDIO — SPACING, RADII, SIZING
   Disciplined 4px grid. Sharp corners — radii stay minimal.
   ============================================================ */
:root {
  --space-0: 0;
  --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-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* Radii — sharp. The brand is disciplined, not soft. */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;      /* only for tags / small pills */

  /* Containers */
  --container: 1240px;
  --container-narrow: 820px;
  --gutter: 24px;

  /* Control sizing */
  --control-h-sm: 34px;
  --control-h-md: 44px;
  --control-h-lg: 54px;

  /* Borders */
  --bw-hairline: 1px;
  --bw: 2px;             /* default confident border */
  --bw-bold: 3px;

  /* Z-index */
  --z-base: 1; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-overlay: 500; /* @kind other */
  --z-modal: 1000; /* @kind other */
  --z-toast: 1500; /* @kind other */
}
/* ============================================================
   VITTO STUDIO — EFFECTS: shadows, motion, focus
   Shadows are firm and grounded (no soft floaty blur).
   Motion is decisive — quick, controlled, no bounce.
   ============================================================ */
:root {
  /* Elevation — tight, dark, confident */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.16);
  --shadow-lg: 0 18px 40px rgba(0,0,0,0.22);
  --shadow-red: 0 12px 30px rgba(217,37,37,0.35);

  /* Hard offset shadow — the signature "printed / poster" edge */
  --shadow-hard: 4px 4px 0 var(--off-black);
  --shadow-hard-red: 5px 5px 0 var(--red);

  /* Focus */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* Motion — decisive easing */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-sharp: cubic-bezier(0.4, 0, 0, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur: 180ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  /* Overlays / scrims */
  --scrim: rgba(0,0,0,0.6);
  --scrim-red: rgba(58,9,9,0.72);
}
/* ============================================================
   VITTO STUDIO — BASE / RESET
   Light element defaults so specimen cards & kits look right.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-bold); color: inherit; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }

::selection { background: var(--red); color: var(--white); }

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}