/* ============================================================
   Arun · Design System — shared tokens & type roles
   ============================================================

   Single source of truth for colour, typography and spacing
   across every page on the site. Every new page MUST link
   this file first, then add its own page-specific layout on
   top. Never re-declare palette or type sizes locally — extend
   the tokens here if you need something new.

   Palette:   black + white only. No greys, no accent hues.
   Display:   NewBlack Typeface Bold  (uppercase-native)
   Body:      Inter Regular + Bold

   Companion docs:
     PROJECT-BRIEF.md    — voice, behaviour, brand rules
     chat-scenarios.csv  — every microcopy string
============================================================ */

/* ── FONT ─────────────────────────────────────────────────── */
/* Display face — loaded from the site's own /fonts/ directory,
   same file the video hero uses. Paths are relative to the CSS
   file's location (onam/css/), one level up to reach /onam/. */
@font-face {
  font-family: 'NewBlack Typeface';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/NewBlackTypeface-Bold.woff2') format('woff2'),
       url('../fonts/NewBlackTypeface-Bold.woff')  format('woff');
}

/* ── TOKENS ───────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* Palette. The base pair (`--ink` + `--paper`) still carries
     most of the site; `--mid` was added 2026-08-27 per Arun as
     a real third opaque colour — first used as the black-out
     tint on .case-sticky__inner::after in about.css. Reach for
     it when a scene needs a grey that reads as its own value
     rather than tinted ink. Rules and dividers still use the
     -hair tokens (black at partial opacity). */
  --ink:        #000;
  --paper:      #fff;
  --mid:        #4d4d4d;
  --hair:       rgba(0, 0, 0, 0.18);
  --hair-inv:   rgba(255, 255, 255, 0.22);
  --mute:       rgba(0, 0, 0, 0.55);
  --mute-inv:   rgba(255, 255, 255, 0.55);

  /* Type families */
  --font-display: 'NewBlack Typeface', 'Impact', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Peak type sizes — use with clamp() for fluid resizing. */
  --type-display-xl: 310px;    /* Hero mark: "I'M ARUN" */
  --type-display-l:   80px;    /* Section headlines */
  --type-display-m:   50px;    /* Editorial callouts */
  --type-display-s:   40px;    /* Block titles */
  --type-display-xs:  20px;    /* Nav / chrome labels */
  --type-body-xl:  45.67px;    /* Process step titles (Inter Bold) */
  --type-body-l:      30px;    /* Lead paragraphs */
  --type-body-m:      18px;    /* Body copy */
  --type-label:       11px;    /* Micro-labels (uppercase) */

  /* Spacing scale — every layout gap on the site is one of these. */
  --space-0:     0px;
  --space-1:    10px;
  --space-2:    20px;
  --space-3:    30px;
  --space-4:    40px;
  --space-6:    60px;
  --space-8:    80px;
  --space-10:  100px;
  --space-12:  120px;
  --space-13:  130px;
  --space-20:  200px;

  /* ── 6-column layout grid ──────────────────────────────────
     Matches Figma at 1440 px: 60 px side margin, 30 px gutter,
     6 equal columns. Percentages are rounded to the nearest
     tenth for cleaner numbers — 4.2% ≈ 60.5 px and 2.1% ≈ 30.2 px
     at 1440, differences invisible to the eye. All in percentages
     so the grid scales proportionally at any viewport width. */
  --cols:        6;
  --col-margin:  4.2%;    /* page left/right padding */
  --col-gap:     2.1%;    /* gutter between columns */

  /* Legacy alias — old code still uses --pad-edge for edge padding.
     Points at the same column margin so both stay in sync. */
  --pad-edge:    var(--col-margin);
  --gap-section: clamp(80px, 15vw, 200px);
  --radius-card: 12px;
}

/* ── GRID UTILITY ─────────────────────────────────────────
   Drop `class="grid grid--6"` on any container to lay its
   children out on the 6-column grid. Children then position
   themselves with `.col-span-N` or inline `grid-column: A / B`. */
.grid {
  display: grid;
  column-gap: var(--col-gap);
}
.grid--6 {
  grid-template-columns: repeat(var(--cols), 1fr);
}

/* Column-span helpers — pick how many of the 6 columns an item
   should occupy. Use `.col-start-N` alongside to shift start. */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }

.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }
.col-start-6 { grid-column-start: 6; }

/* ── RESET ────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* ── TYPE ROLE CLASSES ────────────────────────────────────── */
/* Prefer these classes over ad-hoc font declarations on pages.
   Every role here matches a row on the design-system reference. */

.type--display-xl {
  font-family: var(--font-display);
  font-size: clamp(96px, 22vw, 310px);
  line-height: 0.82;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
}
.type--display-l {
  font-family: var(--font-display);
  font-size: clamp(40px, 8vw, 80px);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
}
.type--display-m {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 50px);
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
}
.type--display-s {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
}
.type--display-xs {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
}
.type--body-xl-b {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 45.67px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}
.type--body-l {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.2;
  margin: 0;
}
.type--body-l-b {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.2;
  margin: 0;
}
.type--body-m {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
}
.type--body-m-b {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
}
.type--label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;
  color: var(--mute);
}

/* ── MOBILE TYPE OVERRIDES ────────────────────────────────
   Font sizes at mobile viewports (<= 767px). Only overrides
   the font-size on each role - line-height, letter-spacing,
   font-family, weight, and case all stay identical to the
   desktop declarations above. Proposed on design-system.html
   and approved by Arun 2026-08-27. */
@media (max-width: 767px) {
  .type--display-xl { font-size: 120px; }  /* per Arun 2026-08-30 (was 100px) */
  .type--display-l  { font-size: 40px; }
  .type--display-m  { font-size: 28px; }
  .type--display-s  { font-size: 24px; }
  .type--display-xs { font-size: 16px; }
  .type--body-xl-b  { font-size: 26px; }
  .type--body-l     { font-size: 18px; }
  .type--body-l-b   { font-size: 18px; }
  .type--body-m     { font-size: 16px; }
  .type--body-m-b   { font-size: 16px; }
  /* .type--label stays at 11px on every viewport - already small. */
}

/* ── SURFACE HELPERS ──────────────────────────────────────── */
/* Two ground surfaces. Every element inside inverts colours
   automatically through the tokens. */
.surface--paper { background: var(--paper); color: var(--ink); }
.surface--ink   { background: var(--ink);   color: var(--paper); }
.surface--ink .type--label { color: var(--mute-inv); }

/* Global keyboard focus */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
:root .surface--ink :focus-visible {
  outline-color: var(--paper);
}

/* Respect reduced motion by default; smooth scroll only when the
   visitor is fine with motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}