/* ========================================================================
   osapiens Design System — Colors & Type tokens
   Source of truth: 2025 osapiens Master Deck + Claude Feed.fig
   ======================================================================== */

/* Roboto — locally-licensed .ttf files (uploaded by brand). */
@font-face { font-family: "Roboto"; font-weight: 100; font-style: normal;
  src: url("fonts/Roboto-Thin.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Roboto"; font-weight: 100; font-style: italic;
  src: url("fonts/Roboto-ThinItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Roboto"; font-weight: 300; font-style: normal;
  src: url("fonts/Roboto-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Roboto"; font-weight: 300; font-style: italic;
  src: url("fonts/Roboto-LightItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal;
  src: url("fonts/Roboto-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Roboto"; font-weight: 400; font-style: italic;
  src: url("fonts/Roboto-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Roboto"; font-weight: 500; font-style: normal;
  src: url("fonts/Roboto-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Roboto"; font-weight: 500; font-style: italic;
  src: url("fonts/Roboto-MediumItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal;
  src: url("fonts/Roboto-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: italic;
  src: url("fonts/Roboto-BoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Roboto"; font-weight: 900; font-style: normal;
  src: url("fonts/Roboto-Black.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Roboto"; font-weight: 900; font-style: italic;
  src: url("fonts/Roboto-BlackItalic.ttf") format("truetype"); font-display: swap; }

/* Space Grotesk — locally-licensed variable font (300–700). */
@font-face {
  font-family: "Space Grotesk";
  font-weight: 300 700;
  font-style: normal;
  src: url("fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
  font-display: swap;
}

:root {
  /* ──────────────────────────────────────────────────────────────────
     BRAND COLORS
     The brand trio: green, teal, black. The osapiens logo gradient
     runs from green → teal; black is the canonical surface color.
     ────────────────────────────────────────────────────────────────── */
  /* ──────────────────────────────────────────────────────────────────
     INTERFACE BRAND — primary / secondary
     Two themes: Bright (content surfaces) + Dark (main nav, header).
     Black removed from main brand palette.
     ────────────────────────────────────────────────────────────────── */
  --primary-100:   #007EB0;   /* interface primary (was "green" alias) */
  --secondary-100: #4BC676;   /* interface secondary                   */
  --osa-gradient: linear-gradient(135deg, #007EB0 0%, #4BC676 100%);
  --osa-gradient-extended: linear-gradient(135deg, #007EB0 0%, #4BC676 100%);

  /* Marketing palette (kept for decks / brand surfaces) */
  --osa-green:     #4BC676;
  --osa-teal:      #00B3BE;
  --osa-black:     #000000;
  --osa-teal-alt:  #00B4BE;
  /* ──────────────────────────────────────────────────────────────────
     INTERFACE SEMANTICS — Bright theme
     Each role has tints (10/20/30) and shades (110/120) around -100.
     Dark-theme variants TBD. Marketing palette uses --osa-amber/red/etc.
     ────────────────────────────────────────────────────────────────── */
  --warning-10:  #FFF6DC;
  --warning-20:  #FFECB5;
  --warning-30:  #FFE083;
  --warning-100: #FFC107;
  --warning-110: #CE8C04;
  --warning-120: #9C6200;

  --error-10:    #FDE2DF;
  --error-20:    #FBC0BB;
  --error-30:    #F9968E;
  --error-100:   #F44336;
  --error-110:   #BC0000;
  --error-120:   #870000;

  --info-10:     #EEF7FA;
  --info-20:     #DCEDF4;
  --info-30:     #C4E1ED;
  --info-100:    #007EB0;   /* same hex as primary-100, distinct role */
  --info-110:    #00507F;
  --info-120:    #002753;

  --success-10:  #EFFAF3;
  --success-20:  #DCF4E5;
  --success-30:  #C5EDD3;
  --success-100: #4BC676;   /* same hex as secondary-100, distinct role */
  --success-110: #009448;
  --success-120: #00681C;

  /* Marketing palette (kept) */
  --osa-blue:      #00B1E9;
  --osa-cyan:      #00FFFF;   /* glow / highlight accent            */
  --osa-green-soft:#5CB675;   /* logo stop, slightly desaturated    */
  --osa-yellow:    #FFCC00;   /* warning / highlight                */
  --osa-blue-deep: #004BC0;   /* deep info blue                     */
  --osa-steel-blue:#3E5870;   /* osapiens steel blue (semantic info)*/
  --osa-red:       #D55341;   /* destructive / negative             */
  --osa-amber:     #EEBF00;   /* attention                          */
  --osa-green-3:   #59AF94;   /* osapiens tertiary green            */
  --osa-onyx:      #1E1E1E;   /* osapiens onyx — semantic surface   */

  /* Legacy aliases — kept so older slides keep rendering */
  --osa-blue-mid:  var(--osa-steel-blue);
  --osa-sage:      var(--osa-green-3);

  /* Signature gradient (used in logo, hero washes, mesh blobs) */
  --osa-gradient: linear-gradient(135deg, #5CB675 0%, #00B4BE 100%);
  --osa-gradient-extended: linear-gradient(135deg, #4BC676 0%, #00B3BE 50%, #00B1E9 100%);

  /* ──────────────────────────────────────────────────────────────────
     NEUTRALS — interface gray ramp.
     We only use two clusters: 10–60 (light tints) and 100–140 (mid → dark).
     The 70–90 range is intentionally OMITTED.
     ────────────────────────────────────────────────────────────────── */
  --gray-10:   #fafafa;
  --gray-20:   #eeeeee;
  --gray-30:   #e0e0e0;
  --gray-40:   #cacaca;
  --gray-50:   #b2b2b2;
  --gray-60:   #9e9e9e;
  /* 70 / 80 / 90 — not used */
  --gray-100:  #757575;
  --gray-110:  #424242;
  --gray-120:  #323232;
  --gray-130:  #2c2c2c;
  --gray-140:  #212121;

  /* Text colors — linked to the neutral ramp. */
  --text-primary:   var(--gray-140);
  --text-secondary: var(--gray-100);
  --text-disabled:  var(--gray-60);

  --osa-black:     #000000;
  --osa-white:     #FFFFFF;

  /* Legacy aliases — old slides + components still reference these.
     Map them to the new ramp so nothing breaks. */
  --osa-ink:       var(--gray-140);
  --osa-ink-2:     var(--gray-140);
  --osa-ink-3:     var(--gray-130);
  --osa-ink-4:     var(--gray-130);
  --osa-graphite:  var(--gray-120);
  --osa-gray-700:  var(--gray-100);
  --osa-gray-500:  var(--gray-60);
  --osa-gray-300:  var(--gray-30);
  --osa-gray-200:  var(--gray-20);
  --osa-gray-100:  var(--gray-10);

  /* Translucent whites (ribbon glow / dark-bg overlays) */
  --osa-white-60:  rgba(255,255,255,0.60);
  --osa-white-40:  rgba(255,255,255,0.40);
  --osa-white-25:  rgba(255,255,255,0.25);
  --osa-white-10:  rgba(255,255,255,0.10);
  --osa-black-20:  rgba(0,0,0,0.20);

  /* ──────────────────────────────────────────────────────────────────
     SEMANTIC ROLES — light surface (default)
     ────────────────────────────────────────────────────────────────── */
  --bg:            var(--osa-white);
  --bg-subtle:     var(--osa-gray-100);
  --bg-muted:      var(--osa-gray-200);
  --surface:       var(--osa-white);
  --surface-2:     var(--osa-gray-100);
  --border:        var(--osa-gray-300);
  --border-strong: var(--osa-gray-500);
  --fg:            var(--osa-ink);
  --fg-muted:      var(--osa-graphite);
  --fg-subtle:     var(--osa-gray-700);
  --fg-on-accent:  var(--osa-white);

  --accent:          var(--osa-teal);
  --accent-2:        var(--osa-green);
  --accent-gradient: var(--osa-gradient);

  --info:      var(--osa-steel-blue);
  --success:   var(--osa-green);
  --warning:   var(--osa-amber);
  --danger:    var(--osa-red);
  --tertiary:  var(--osa-green-3);
  --surface-onyx: var(--osa-onyx);

  /* ──────────────────────────────────────────────────────────────────
     TYPOGRAPHY
     Headlines  H1–H3   →  Space Grotesk  (Medium / SemiBold)
     Body       p1–p3   →  Roboto         (Regular / Medium)
     ────────────────────────────────────────────────────────────────── */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — calibrated against master deck (1280×720 design unit)
     and figma usage. Use rem-equivalents in product UI. */
  --fs-h1:   56px;   /* hero title — Space Grotesk Medium */
  --fs-h2:   32px;   /* section header */
  --fs-h3:   22px;   /* sub-header / card title */
  --fs-h4:   18px;   /* small header, often Bold */
  --fs-body-2: 16px;  /* body 2 — emphasized lead-in */
  --fs-body:   14px;  /* body — base product UI / forms / tables */
  --fs-caption: 12px; /* caption / metadata / helper */
  --fs-badge:   12px; /* badge label */
  --fs-footer:  10px;

  /* legacy aliases */
  --fs-p1:   var(--fs-body-2);
  --fs-p2:   var(--fs-body);
  --fs-p3:   var(--fs-caption);

  --lh-tight:  1.0;
  --lh-snug:   1.15;
  --lh-normal: 1.4;
  --lh-loose:  1.6;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ──────────────────────────────────────────────────────────────────
     SPACING (4-pt base, master-deck aligned)
     ────────────────────────────────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ──────────────────────────────────────────────────────────────────
     RADII — only two values are used.
     4px on almost everything; pill on round icon buttons.
     ────────────────────────────────────────────────────────────────── */
  --radius:      4px;
  --radius-pill: 999px;

  /* ──────────────────────────────────────────────────────────────────
     SHADOWS — light, mostly used on light surfaces.
     On dark surfaces, "elevation" is expressed as a teal/cyan glow.
     ────────────────────────────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.10);
  --shadow-4: 0 24px 60px rgba(0,0,0,0.18);

  --glow-teal:   0 0 24px rgba(0,179,190,0.55), 0 0 64px rgba(0,179,190,0.25);
  --glow-green:  0 0 24px rgba(75,198,118,0.55), 0 0 64px rgba(75,198,118,0.25);
  --glow-mixed:  0 0 32px rgba(0,179,190,0.35), 0 0 80px rgba(75,198,118,0.25);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ============================================================
   DARK theme — the brand's preferred presentation surface.
   Slides, hero sections, and "pull effect" backgrounds use this.
   ============================================================ */
.osa-dark, [data-theme="dark"] {
  --bg:            var(--osa-black);
  --bg-subtle:     var(--osa-ink);
  --bg-muted:      var(--osa-ink-3);
  --surface:       var(--osa-ink);
  --surface-2:     var(--osa-ink-3);
  --border:        rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.28);
  --fg:            var(--osa-white);
  --fg-muted:      rgba(255,255,255,0.78);
  --fg-subtle:     rgba(255,255,255,0.52);
  --fg-on-accent:  var(--osa-black);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply by element (h1, p, code…) — the foundation for any
   product surface or marketing page.
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size:   14px;
  line-height: 22px;
  letter-spacing: 0.14px;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--sp-5);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--sp-4);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-3);
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-3);
}

p, .body { font-size: 14px; line-height: 22px; letter-spacing: 0.14px; margin: 0 0 var(--sp-3); }
.body-2  { font-size: 16px; line-height: var(--lh-normal); letter-spacing: 0.16px; }
.caption {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.12px;
  color: var(--fg-subtle);
}
.badge-text {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0.1px;
}
.mono   { font-family: var(--font-mono); font-size: 14px; line-height: 22px; letter-spacing: 0.14px; }
.mono-2 { font-family: var(--font-mono); font-size: 12px; line-height: 18px; letter-spacing: 0.12px; }

/* legacy aliases */
.p1 { font-size: 16px; line-height: var(--lh-normal); letter-spacing: 0.16px; }
.p2 { font-size: 14px; line-height: 22px; letter-spacing: 0.14px; }
.p3 { font-size: 12px; line-height: 18px; letter-spacing: 0.12px; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-p3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--accent);
}

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

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-standard);
}
a:hover { border-bottom-color: currentColor; }

/* ============================================================
   INTERFACE TYPE SYSTEM (product UI / HUB / applications)
   All headings use Roboto. Use these classes inside product
   surfaces; the element-level h1–h4 styles above are the
   marketing system (Space Grotesk).
   ============================================================ */
.ui-h1 { font-family: var(--font-body); font-weight: 500; font-size: 28px; line-height: 42px; letter-spacing: 0.28px; margin: 0; }
.ui-h2 { font-family: var(--font-body); font-weight: 500; font-size: 24px; line-height: 36px; letter-spacing: 0.24px; margin: 0; }
.ui-h3 { font-family: var(--font-body); font-weight: 500; font-size: 20px; line-height: 32px; letter-spacing: 0.20px; margin: 0; }
.ui-h4 { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: 0.14px; margin: 0; }
.ui-h5 { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: 0.14px; margin: 0; }

/* Number ramp — interface only, Space Grotesk Medium (N5 = Regular).
   Used on metric/KPI cards, counters, dashboard tiles. */
.n1 { font-family: var(--font-display); font-weight: 500; font-size: 36px; line-height: 40px; letter-spacing: 0.36px; }
.n2 { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 26px; letter-spacing: 0.24px; }
.n3 { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 24px; letter-spacing: 0.20px; }
.n4 { font-family: var(--font-display); font-weight: 500; font-size: 14px; line-height: 22px; letter-spacing: 0.14px; }
.n5 { font-family: var(--font-display); font-weight: 400; font-size: 14px; line-height: 22px; letter-spacing: 0.14px; }

/* Gradient text utility — used on key marketing words like "sustainable" */
.osa-gradient-text {
  background: var(--osa-gradient-extended);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}