/* ==========================================================
   Gayathri v2 — shared design tokens
   Used by every prototype in /v2. Change brand values here.
   ========================================================== */

:root {
  /* Mould: the dark, warm near-black of a polished FRP mould */
  --mould: #12100e;
  --mould-2: #1b1815;
  --mould-3: #26221e;
  --mould-line: rgba(255, 244, 230, 0.1);

  /* Gel coat: the warm off-white finish of a demoulded part */
  --gel: #f3efe7;
  --gel-2: #e8e2d6;
  --gel-3: #d9d1c2;

  /* Ink */
  --ink: #171411;
  --ink-2: #4a433b;
  --ink-3: #8a8073;
  --ink-line: rgba(23, 20, 17, 0.12);

  /* Brand + materials */
  --orange: #ec6608;      /* logo orange */
  --orange-deep: #c94f00;
  --resin: #f4a53c;       /* liquid resin, amber */
  --foam: #f1e2b8;        /* cured PU foam */
  --glass: #fbfaf6;       /* glass fibre */

  /* Type */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --step-0: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3rem);
  --step-lede: clamp(1.15rem, 1rem + 0.55vw, 1.5rem);   /* intro paragraphs */
  --step-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.4vw, 2.6rem);
  --step-3: clamp(2.2rem, 1.6rem + 2.8vw, 4.4rem);
  --step-4: clamp(3rem, 2rem + 5vw, 7.5rem);

  /* Space + shape */
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --radius: 18px;
  --radius-sm: 10px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
}

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

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

body {
  margin: 0;
  background: var(--gel);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-0);
  line-height: 1.55;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, svg { display: block; max-width: 100%; }

a { color: inherit; }

::selection { background: var(--orange); color: var(--gel); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.mono {
  font-family: var(--font-mono);
  font-size: clamp(0.8rem, 0.72rem + 0.25vw, 0.98rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; }