/* ============================================================
   OCTO Design System — Colors & Type
   Sources of truth:
     • OCTO Brand Board.pdf (primary type: Roboto; brand palette)
     • OCTO Website 2026.fig (dark-mode industrial application)
     • Brand brief from CD (atmospheric backgrounds, voice & tone)

   The brand board specifies Roboto. The 2026 website ships in
   DM Sans. We support both — Roboto is the default for slides
   and brand-side artifacts; DM Sans is a permissible web variant
   for product surfaces (set --font-display/-body to DM Sans).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Roboto+Mono:wght@400;500&display=swap");

:root {
  /* ─── Brand Color Tokens (raw) ──────────────────────────── */

  /* Primary — OCTO Red */
  --octo-red:           #CF4727; /* "Dark Pastel Red" – primary accent */
  --octo-red-medium:    #E77285; /* "Medium Pastel Red" — secondary callout */
  --octo-red-light:     #FAEEE7; /* "Light Pastel Red" — soft tint backgrounds */

  /* Secondary accent — Lime (use sparingly, 1× per composition) */
  --octo-lime:          #D1F011;

  /* Greys (brand board) */
  --grey-900:           #121218; /* near-black w/ blue undertone (Figma bg) */
  --grey-850:           #1c1c29; /* card / elevated surface */
  --grey-800:           #2c2c47; /* raised border / hairline */
  --grey-700:           #444444; /* "Dark Grey" — body on light */
  --grey-500:           #9e9e9e; /* "Medium Grey" — secondary labels */
  --grey-300:           #d9d9d9;
  --grey-200:           #eeeeee; /* "Light Grey" — divider on light */
  --grey-100:           #efeff0;
  --white:              #ffffff;
  --black:              #000000;

  /* Auxiliary palette pulled from website variant — for data-viz */
  --viz-blue:           #383899; /* deep indigo */
  --viz-blue-bright:    #006aff;
  --viz-violet:         #6047ff;
  --viz-yellow:         #ffd000;
  --viz-green:          #10e988;
  --viz-pink:           #e180fc;

  /* ─── Semantic Colors ───────────────────────────────────── */

  /* Surfaces (dark-mode default) */
  --bg:                 var(--grey-900);
  --bg-elevated:        var(--grey-850);
  --bg-overlay:         rgba(28, 28, 41, 0.55);  /* glass / nav blur tint */
  --hairline:           rgba(255, 255, 255, 0.10);
  --hairline-strong:    rgba(255, 255, 255, 0.20);

  /* Text */
  --fg:                 var(--white);
  --fg-secondary:       var(--grey-500);
  --fg-tertiary:        rgba(255, 255, 255, 0.55);
  --fg-on-light:        var(--grey-900);
  --fg-on-light-2:      var(--grey-700);

  /* Accent semantics */
  --accent:             var(--octo-red);
  --accent-hover:       #b73d20;
  --accent-soft:        rgba(207, 71, 38, 0.18);
  --link:               var(--octo-red);
  --highlight:          var(--octo-lime);
  --rule:               var(--octo-red);   /* divider lines on dark */

  /* Atmospheric glow stops — used by --bg-atmosphere */
  --glow-warm:          rgba(207, 71, 38, 0.32);
  --glow-violet:        rgba(107, 63, 160, 0.22);
  --glow-ember:         rgba(224, 90, 32, 0.30);

  /* Composite background — the OCTO atmospheric look.
     Apply with: background: var(--bg-atmosphere);
     on a near-fullscreen container. */
  --bg-atmosphere:
    radial-gradient(ellipse 60% 55% at 100% 0%, var(--glow-warm)   0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 95%  10%, var(--glow-violet) 0%, transparent 60%),
    radial-gradient(ellipse 35% 35% at 25% 95%, var(--glow-ember)  0%, transparent 65%),
    var(--grey-900);

  /* ─── Typography ────────────────────────────────────────── */

  /* Type families */
  --font-display:       "Roboto", "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body:          "Roboto", "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:          "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-fallback:      Arial, "Helvetica Neue", sans-serif; /* secondary type family per brand board */

  /* Weights — Roboto */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-bold:     700;

  /* Type scale (rem-relative, but with px fallbacks for slides).
     Slide-scale tokens (huge) are also exposed for 1920×1080 work. */
  --t-display-xxl:  clamp(64px, 8vw, 144px); /* hero "let's connect" */
  --t-display-xl:   clamp(48px, 5.5vw, 96px);
  --t-display-l:    clamp(40px, 4vw, 72px);
  --t-h1:           clamp(36px, 3.2vw, 62px);
  --t-h2:           35px;
  --t-h3:           23.3px;     /* spec from Figma component */
  --t-h4:           17.4px;
  --t-body-l:       19.4px;
  --t-body:         16px;
  --t-body-s:       15.5px;
  --t-caption:      14px;
  --t-eyebrow:      14px;       /* uppercase tracking labels */
  --t-tiny:         11.2px;

  /* Tracking (letter-spacing) — open on headers, very open on labels */
  --tr-tight:   -0.02em;
  --tr-normal:  0em;
  --tr-open:    0.05em;
  --tr-wider:   0.12em;   /* button labels (per Figma) */

  /* Leading (line-height) */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.65;

  /* ─── Spacing & layout ──────────────────────────────────── */
  --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;

  /* Container widths */
  --container-narrow: 720px;
  --container:        1200px;
  --container-wide:   1440px;

  /* Radii — OCTO uses pill buttons + small radius cards */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-pill: 999px;

  /* Shadows — used sparingly */
  --shadow-soft:    0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.25);
  --shadow-overlay: 0 12px 48px rgba(0,0,0,0.45);

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-emph:  cubic-bezier(0.2,  0.8,  0.2,  1);
  --t-fast:     180ms;
  --t-base:     320ms;
  --t-slow:     560ms;
}

/* ============================================================
   Semantic element styles — opt in via class .octo-prose, or
   apply as a baseline by importing this file at the doc root.
   ============================================================ */

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

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--t-h2);
  line-height: 42px;
  letter-spacing: var(--tr-tight);
  color: var(--fg);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h3);
  line-height: 27.9px;
  letter-spacing: -0.31px;
  color: var(--fg);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h4);
  line-height: 1.5;
  color: var(--fg);
  margin: 0;
}

p, .body {
  font-size: var(--t-body);
  line-height: var(--lh-loose);
  color: var(--fg);
  margin: 0;
}

.body-l { font-size: var(--t-body-l); line-height: 29px; }
.body-s { font-size: var(--t-body-s); line-height: 1.6; }

.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  color: var(--fg);
}

.label-wide {
  font-size: var(--t-h4);
  letter-spacing: var(--tr-open);
  color: var(--fg);
}

a, .link {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease-out),
              opacity      var(--t-fast) var(--ease-out);
}
a:hover, .link:hover { border-bottom-color: currentColor; opacity: 0.9; }

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

/* All-caps brand mention */
.brand { text-transform: uppercase; letter-spacing: var(--tr-open); }

/* Horizontal rule — OCTO red hairline */
hr.octo-rule {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: var(--s-6) 0;
}

/* Utility: atmosphere bg (use on a fullscreen wrapper) */
.octo-atmosphere {
  background: var(--bg-atmosphere);
  background-attachment: fixed;
}