/* ============================================================
   robis — Design Tokens
   Colors + Type Foundations
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* Brand face — Helvetica Now Display (uploaded by brand)
   Full family: Hairline, Thin, ExtLt, Light, Regular, Medium, Bold,
   ExtraBold, ExtBlk, Black — with matching italics. */
@font-face { font-family: 'Helvetica Now Display'; font-style: normal; font-weight: 100; font-display: swap;
  src: url('fonts/HelveticaNowDisplay-Hairline.ttf') format('truetype'); }
@font-face { font-family: 'Helvetica Now Display'; font-style: italic; font-weight: 100; font-display: swap;
  src: url('fonts/HelveticaNowDisplay-HairlineI.ttf') format('truetype'); }
@font-face { font-family: 'Helvetica Now Display'; font-style: normal; font-weight: 200; font-display: swap;
  src: url('fonts/HelveticaNowDisplay-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Helvetica Now Display'; font-style: italic; font-weight: 200; font-display: swap;
  src: url('fonts/HelveticaNowDisplay-ThinIta.ttf') format('truetype'); }
@font-face { font-family: 'Helvetica Now Display'; font-style: normal; font-weight: 250; font-display: swap;
  src: url('fonts/HelveticaNowDisplay-ExtLt.ttf') format('truetype'); }
@font-face { font-family: 'Helvetica Now Display'; font-style: italic; font-weight: 250; font-display: swap;
  src: url('fonts/HelveticaNowDisplay-ExtLtIta.ttf') format('truetype'); }
@font-face { font-family: 'Helvetica Now Display'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/HelveticaNowDisplay-Light.ttf') format('truetype'); }
@font-face { font-family: 'Helvetica Now Display'; font-style: italic; font-weight: 300; font-display: swap;
  src: url('fonts/HelveticaNowDisplay-LightIta.ttf') format('truetype'); }
@font-face { font-family: 'Helvetica Now Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/HelveticaNowDisplay-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Helvetica Now Display'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/HelveticaNowDisplay-RegIta.ttf') format('truetype'); }
@font-face { font-family: 'Helvetica Now Display'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/HelveticaNowDisplay-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Helvetica Now Display'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('fonts/HelveticaNowDisplay-MedIta.ttf') format('truetype'); }
@font-face { font-family: 'Helvetica Now Display'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/HelveticaNowDisplay-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Helvetica Now Display'; font-style: italic; font-weight: 700; font-display: swap;
  src: url('fonts/HelveticaNowDisplay-BoldIta.ttf') format('truetype'); }
@font-face { font-family: 'Helvetica Now Display'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/HelveticaNowDisplay-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Helvetica Now Display'; font-style: italic; font-weight: 800; font-display: swap;
  src: url('fonts/HelveticaNowDisplay-ExtBdIta.ttf') format('truetype'); }
@font-face { font-family: 'Helvetica Now Display'; font-style: normal; font-weight: 850; font-display: swap;
  src: url('fonts/HelveticaNowDisplay-ExtBlk.ttf') format('truetype'); }
@font-face { font-family: 'Helvetica Now Display'; font-style: italic; font-weight: 850; font-display: swap;
  src: url('fonts/HelveticaNowDisplay-ExtBlkIta.ttf') format('truetype'); }
@font-face { font-family: 'Helvetica Now Display'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('fonts/HelveticaNowDisplay-Black.ttf') format('truetype'); }
@font-face { font-family: 'Helvetica Now Display'; font-style: italic; font-weight: 900; font-display: swap;
  src: url('fonts/HelveticaNowDisplay-BlackIta.ttf') format('truetype'); }

:root {
  /* ============================================================
     COLOR — Foundation
     robis is a cinematic dark-first brand. Black backgrounds,
     clean white type, a single branded blue for accents.
     ============================================================ */

  /* Neutrals — near-black to near-white, warm-cool neutral */
  --ink-0:   #000000;   /* true black — hero/page background */
  --ink-50:  #0a0a0b;   /* near black — cards on black */
  --ink-100: #121214;   /* elevated surface 1 */
  --ink-200: #1a1a1d;   /* elevated surface 2 / dividers on black */
  --ink-300: #242428;   /* subtle borders on dark */
  --ink-400: #3a3a40;   /* muted rule / disabled stroke */
  --ink-500: #5c5c63;   /* fg-tertiary on dark */
  --ink-600: #8a8a93;   /* fg-secondary on dark */
  --ink-700: #b4b4bc;   /* fg quiet on dark */
  --ink-800: #d8d8dc;   /* near-white */
  --ink-900: #ffffff;   /* pure white */

  /* Brand accent — the sphere blue, a warm-soft periwinkle */
  --blue-50:  #eaf2ff;
  --blue-100: #d6e6ff;
  --blue-200: #b5d1ff;  /* sphere mid */
  --blue-300: #9bc2ff;  /* sphere core — primary brand blue */
  --blue-400: #79a9f5;
  --blue-500: #5a8ee0;
  --blue-600: #3b70c2;

  /* Semantic / signal (used sparingly — brand is monochromatic + blue) */
  --signal-warn:    #e8c268;
  --signal-error:   #e06a5a;
  --signal-success: #8cc69a;

  /* ============================================================
     SEMANTIC COLOR — use these in components
     ============================================================ */

  /* Backgrounds */
  --bg-page:      var(--ink-0);      /* page fill — true black */
  --bg-surface:   var(--ink-100);    /* card */
  --bg-raised:    var(--ink-200);    /* menus, modals on top of cards */
  --bg-sky:       #c8d4e2;           /* cloud/sky reference — light alt page */
  --bg-paper:     #f4f4f0;           /* warm off-white alt page */

  /* Foregrounds */
  --fg-1:         var(--ink-900);    /* primary text on dark */
  --fg-2:         var(--ink-700);    /* secondary text on dark */
  --fg-3:         var(--ink-600);    /* tertiary / caption on dark */
  --fg-4:         var(--ink-500);    /* quiet / disabled */
  --fg-inv-1:     var(--ink-0);      /* primary text on light */
  --fg-inv-2:     #2a2a2e;           /* body text on light */

  /* Borders / rules */
  --line-1:       var(--ink-300);    /* default border on dark */
  --line-2:       var(--ink-200);    /* subtle */
  --line-inv-1:   rgba(0,0,0,.12);   /* default border on light */

  /* Accent roles */
  --accent:       var(--blue-300);
  --accent-soft:  var(--blue-100);
  --accent-ink:   var(--blue-600);
  --link-underline: var(--blue-400);

  /* Overlays — for cinematic image protection */
  --scrim-top:    linear-gradient(180deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 60%);
  --scrim-bottom: linear-gradient(0deg,   rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 65%);
  --scrim-full:   linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 100%);
  --scrim-vignette: radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);

  /* ============================================================
     TYPOGRAPHY — Families
     Display: Archivo Black (heavy italic wordmark feel)
     Text:    Space Grotesk (clean geometric)
     Mono:    JetBrains Mono (timecodes, metadata)
     ============================================================ */

  --font-display: "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif;
  --font-text:    "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — modular, display-forward */
  --step--1: 0.75rem;      /* 12 — label/caption */
  --step-0:  0.875rem;     /* 14 — small body / UI */
  --step-1:  1rem;         /* 16 — body */
  --step-2:  1.125rem;     /* 18 — lead */
  --step-3:  1.5rem;       /* 24 — h4 */
  --step-4:  2rem;         /* 32 — h3 */
  --step-5:  2.75rem;      /* 44 — h2 */
  --step-6:  4rem;         /* 64 — h1 */
  --step-7:  6rem;         /* 96 — display */
  --step-8:  9rem;         /* 144 — hero mark */

  /* Weights (Archivo Black is 900 only; body uses Space Grotesk range) */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   900;

  /* Line heights — tight for display, comfortable for text */
  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.45;
  --lh-loose:   1.7;

  /* Tracking */
  --tr-tight:  -0.02em;
  --tr-snug:   -0.01em;
  --tr-normal: 0;
  --tr-wide:   0.04em;
  --tr-ultra:  0.18em;   /* eyebrow / caps label */

  /* ============================================================
     SPACING / RADII / SHADOW / MOTION
     ============================================================ */

  /* Spacing — 4px baseline */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* Radii — image tiles use the "squircle" soft rounded-square (r-4) */
  --r-0:   0px;
  --r-1:   4px;
  --r-2:   8px;
  --r-3:   14px;
  --r-4:   22px;   /* signature tile radius */
  --r-pill: 999px;

  /* Shadow — used sparingly; mostly image depth + subtle floats */
  --shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --shadow-2: 0 8px 24px rgba(0,0,0,.35);
  --shadow-3: 0 24px 60px rgba(0,0,0,.45);
  --shadow-tile: 0 18px 40px -10px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.25);

  /* Motion */
  --ease-out:  cubic-bezier(.2, .7, .15, 1);
  --ease-in:   cubic-bezier(.6, .05, .85, .3);
  --ease-io:   cubic-bezier(.65, .05, .35, 1);
  --dur-xs: 120ms;
  --dur-s:  200ms;
  --dur-m:  360ms;
  --dur-l:  600ms;
  --dur-xl: 900ms;

  /* Grain — applied via pseudo-elements on hero sections */
  --grain-opacity: 0.06;
}

/* ============================================================
   BASE RESET + SEMANTIC ELEMENT STYLES
   Consumers can override per-page; these set brand defaults.
   ============================================================ */

html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-text);
  font-size: var(--step-1);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — Montserrat italic black, mirrors wordmark */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-style: italic;
  font-size: clamp(var(--step-5), 6vw, var(--step-6));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-style: italic;
  font-size: clamp(var(--step-4), 4.5vw, var(--step-5));
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-style: italic;
  font-size: var(--step-4);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-text);
  font-weight: var(--w-bold);
  font-size: var(--step-3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  margin: 0;
}

/* Display — for hero statements. Use sparingly. */
.display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--w-black);
  font-size: clamp(var(--step-6), 12vw, var(--step-8));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}

/* Wordmark — the "robis" treatment. Black italic, tight. */
.wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--w-black);
  letter-spacing: var(--tr-tight);
  text-transform: lowercase;
}

/* Eyebrow / label — uppercase, wide track, tiny */
.eyebrow, .label {
  font-family: var(--font-text);
  font-weight: var(--w-semi);
  font-size: var(--step--1);
  letter-spacing: var(--tr-ultra);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Body */
p, .body {
  font-family: var(--font-text);
  font-weight: var(--w-regular);
  font-size: var(--step-1);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  max-width: 64ch;
  text-wrap: pretty;
}

.lead {
  font-size: var(--step-2);
  color: var(--fg-1);
  line-height: var(--lh-normal);
}

small, .caption {
  font-size: var(--step--1);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Links — underline thin, accent-blue underline on hover */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out);
}
a:hover { border-bottom-color: var(--link-underline); }

/* Quote — hero-scale italic, periods and all-caps emphasized */
.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--w-black);
  font-size: var(--step-5);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

/* Selection */
::selection {
  background: var(--blue-300);
  color: var(--ink-0);
}