/* ============================================================
   Intenseye Design System — Colors & Type
   Source of truth: references/brand-tokens.md
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family: 'Roobert'; src: url('fonts/Roobert-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roobert'; src: url('fonts/Roobert-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roobert'; src: url('fonts/Roobert-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roobert'; src: url('fonts/Roobert-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roobert'; src: url('fonts/Roobert-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: 'Roobert Mono'; src: url('fonts/RoobertMono-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* Primary palette */
  --color-red:    #FF3D00;   /* primary accent — CTAs, preheaders, pull quotes, key numbers */
  --color-black:  #121216;   /* dark bg / body text on light */
  --color-beige:  #F1F0E5;   /* light page bg (warm off-white) */
  --color-blush:  #FEB29B;   /* soft bg, dark-mode accent text, quote boxes */
  --color-tone:   #FFE6D2;   /* lightest warm tint */
  --color-white:  #FFFFFF;

  /* Secondary — data-viz / categories ONLY. Never UI chrome. */
  --color-pine:     #1E5550;
  --color-navy:     #151E63;
  --color-honey:    #FCAE2A;
  --color-grey:     #C2C2CD;
  --color-dark-red: #702913;
  --color-grey-alt: #84849B;  /* used in Black→Grey gradient stop */

  /* Semantic — light mode (page bg = beige) */
  --bg:           var(--color-beige);
  --bg-elevated: #FAF9F2;
  --fg:           var(--color-black);
  --fg-muted:     rgba(18,18,22,0.70);
  --fg-caption:   var(--color-black);
  --accent:       var(--color-red);
  --border:       rgba(18,18,22,0.12);
  --rule:         var(--color-black);

  /* Background surfaces — the brand is flexible, all six are on-palette.
     Pick by context; see brand-tokens.md.
       black  — default dark (decks, hero, dark web)
       beige  — default light (decks, light web, editorial)
       white  — ONE-PAGERS (print-safe), very clean light moments,
                and light UI surfaces paired with beige for interplay
       blush  — feature cards, quote boxes, pull callouts
       tone   — subtle warm tint inside larger surfaces
       red    — CTA moments only; never full-page background    */
  --bg-black:  var(--color-black);
  --bg-beige:  var(--color-beige);
  --bg-white:  var(--color-white);
  --bg-blush:  var(--color-blush);
  --bg-tone:   var(--color-tone);

  /* Radii */
  --radius-sm:   8px;
  --radius-md:  10px;  /* icon container */
  --radius-lg:  12px;  /* default card / image */
  --radius-xl:  20px;
  --radius-pill: 999px;

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

  /* Type */
  --font-sans: 'Roobert', 'Helvetica', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Roobert Mono', 'Helvetica', ui-monospace, monospace;
  --font-tag:  'Roobert Mono', 'Helvetica', ui-monospace, monospace;

  --size-h1: 100px;   /* Roobert Regular */
  --size-h2:  60px;   /* Roobert Bold */
  --size-h3:  44px;   /* Roobert Semibold */
  --size-p1:  24px;   /* Roobert Semibold — lead */
  --size-p2:  20px;   /* Roobert Regular — body */
  --size-cap: 14px;   /* caption / footer */
  --size-tag: 12px;   /* ALL CAPS preheader */

  --lh-tight:   1.1;   /* >100px */
  --lh-snug:    1.3;   /* ≤2 lines */
  --lh-default: 1.4;   /* multi-line */

  /* Arc motif defaults (see brand-tokens.md) */
  --arc-opacity: 0.10;
}

/* ---------- Dark-mode scheme (opt in via [data-theme="dark"] OR .theme-dark) ---------- */
[data-theme="dark"], .theme-dark {
  --bg:           var(--color-black);
  --bg-elevated: #1A1A1F;
  --fg:           var(--color-beige);
  --fg-muted:     var(--color-grey);
  --fg-caption:   var(--color-beige);
  --accent:       var(--color-red);
  --border:       rgba(241,240,229,0.12);
  --rule:         var(--color-beige);
}

/* ---------- Light-white scheme (opt in via [data-theme="light-white"] OR .theme-white)
   USE FOR: one-pagers (print-safe), very clean/airy landing sections, and any
   surface where white-to-beige interplay is the desired visual. Body text and
   rules go slightly darker because white is more contrasty than beige.
   --------------------------------------------------------------------------- */
[data-theme="light-white"], .theme-white {
  --bg:           var(--color-white);
  --bg-elevated:  var(--color-beige);     /* beige is the 'card' surface on white */
  --fg:           var(--color-black);
  --fg-muted:     rgba(18,18,22,0.65);
  --fg-caption:   var(--color-black);
  --accent:       var(--color-red);
  --border:       rgba(18,18,22,0.14);
  --rule:         var(--color-black);
}

/* ---------- Base ---------- */
html, body { margin: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  font-size: 16px;
  line-height: var(--lh-default);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic type ---------- */
.h1, h1 {
  font-family: var(--font-sans);
  font-weight: 400;              /* Roobert Regular */
  font-size: var(--size-h1);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  margin: 0;
}
.h2, h2 {
  font-family: var(--font-sans);
  font-weight: 700;              /* Bold */
  font-size: var(--size-h2);
  line-height: var(--lh-snug);
  margin: 0;
}
.h3, h3 {
  font-family: var(--font-sans);
  font-weight: 600;              /* Semibold */
  font-size: var(--size-h3);
  line-height: var(--lh-snug);
  margin: 0;
}
.lead, .p1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--size-p1);
  line-height: var(--lh-snug);
}
.body, .p2, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--size-p2);
  line-height: var(--lh-default);
  margin: 0;
}
.caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--size-cap);
  line-height: var(--lh-default);
}
.tag, .preheader {
  font-family: var(--font-tag);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--size-tag);
  letter-spacing: 0.05em;        /* +0.5% tracking (doubled for on-screen readability) */
  color: var(--color-red);
}
.preheader::before {
  content: "• ";
  color: var(--color-red);
}
.mono, code, kbd {
  font-family: var(--font-mono);
  letter-spacing: -0.02em;       /* -2% tracking for numeric / code */
}

/* ---------- Links ---------- */
a {
  color: var(--color-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Arc motif ---------- */
.arc {
  position: absolute;
  top: 0;
  right: 0;
  aspect-ratio: 1 / 1;
  width: 25%;
  pointer-events: none;
  --arc-color: var(--color-blush);   /* default (dark mode) */
  background:
    radial-gradient(
      circle at 100% 0%,
      transparent 0,
      transparent calc(63% - 0.5px),
      var(--arc-color) calc(63% + 0.5px),
      var(--arc-color) calc(100% - 0.5px),
      transparent 100%
    );
  opacity: var(--arc-opacity);
}
.arc.arc--light { --arc-color: var(--color-red); }
.arc.arc--dark  { --arc-color: var(--color-blush); }

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
img { display: block; max-width: 100%; }