/* ============================================================
   OFF AXIS — Design Tokens
   Colors + Type. Import this once and reference vars everywhere.
   ============================================================ */

/* ---- FONTS (brand-supplied, loaded from /fonts) ----
   PRIMARY typeface per the official Logo Guide (p. 14):
   General Sans Variable. Use it for ALL display, headline,
   and body text. No additional primary face.

   Acumin / Neue Haas Grotesk / Helvetica / Roboto were uploaded
   alongside the kit but are NOT specified in the brief — they
   are kept here as system fallbacks only.

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

@font-face {
  font-family: "General Sans";
  src: url("fonts/GeneralSans-Variable.ttf") format("truetype-variations"),
       url("fonts/GeneralSans-Variable.ttf") format("truetype");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans Light";
  src: url("fonts/GeneralSans-Variable.ttf") format("truetype-variations"),
       url("fonts/GeneralSans-Variable.ttf") format("truetype");
  font-weight: 200 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk";
  src: url("fonts/NeueHaasGrotesk.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk";
  src: url("fonts/NeueHaasGroteskMedium.otf") format("opentype");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Acumin Variable";
  src: url("fonts/AcuminVariableConcept.otf") format("opentype-variations"),
       url("fonts/AcuminVariableConcept.otf") format("opentype");
  font-weight: 100 900;
  font-stretch: 50% 200%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Brand";
  src: url("fonts/Helvetica.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------
     COLOR — Brand core
     Off Axis lives in a strict 4-color world: Deep Blue, Light
     Purple (Lavender), Black, White. Greys are only for off-
     states. Color is loud. Use the deep blue for confident,
     editorial moments; lavender for warmth + motion; black for
     conviction; white for negative space.
     --------------------------------------------------------- */
  --oa-blue:        #150CBE;   /* "Off Axis Deep Blue" — primary brand */
  --oa-blue-deep:   #0A0680;   /* pressed / shadow tone */
  --oa-blue-tint:   #534BE8;   /* lighter accent step (gradient mid) */

  --oa-purple:      #938CED;   /* "Off Axis Light Purple" — signature lavender */
  --oa-purple-soft: #BDB9F4;   /* hover surfaces / tints */
  --oa-purple-deep: #6F66DE;   /* pressed / active */

  --oa-black:       #000000;   /* True black. Used freely. */
  --oa-ink:         #0A0A0A;   /* near-black for body text on light */
  --oa-white:       #FFFFFF;
  --oa-light-grey:  #EDEDED;   /* Official "Light Grey" background — per Logo Guide p.12. The most common background, alongside black. */
  --oa-paper:       var(--oa-light-grey);  /* alias for legacy paper var */

  /* Neutrals — sparingly. Greys appear in bitmap mono swirls and
     disabled states only. */
  --oa-grey-100:    #EDEDED;
  --oa-grey-300:    #C9C9C9;
  --oa-grey-500:    #9E9E9E;   /* Official "Grey" per Logo Guide p.12 */
  --oa-grey-700:    #4A4A4A;
  --oa-grey-900:    #1A1A1A;

  /* Semantic — system feedback. Kept tonal so they don't fight
     the brand purple/blue. */
  --oa-success:     #2E7D5B;
  --oa-warning:     #C77B2A;
  --oa-danger:      #C2362A;
  --oa-info:        var(--oa-blue);

  /* ---------------------------------------------------------
     FOREGROUND / BACKGROUND aliases — use these in product.
     fg = text/icons on a given surface.  bg = surface fill.
     --------------------------------------------------------- */
  --fg-1:           var(--oa-ink);          /* primary text on light */
  --fg-2:           var(--oa-grey-700);     /* secondary text */
  --fg-3:           var(--oa-grey-500);     /* tertiary / captions */
  --fg-inverse:     var(--oa-white);        /* text on dark/colored */
  --fg-brand:       var(--oa-blue);
  --fg-accent:      var(--oa-purple);

  --bg-canvas:      var(--oa-light-grey);  /* OFFICIAL default surface */
  --bg-canvas-warm: var(--oa-light-grey);
  --bg-surface:     var(--oa-light-grey);
  --bg-elevated:    var(--oa-white);
  --bg-inverse:     var(--oa-black);
  --bg-brand:       var(--oa-blue);
  --bg-accent:      var(--oa-purple);

  --border-1:       rgba(0,0,0,0.12);
  --border-2:       rgba(0,0,0,0.06);
  --border-strong:  var(--oa-black);        /* the heavy black hairline */

  /* ---------------------------------------------------------
     TYPE — Families
     --------------------------------------------------------- */
  --font-display:   "General Sans", "Neue Haas Grotesk", "Helvetica Brand", Helvetica, system-ui, sans-serif;
  --font-headline:  "General Sans", "Neue Haas Grotesk", "Helvetica Brand", Helvetica, system-ui, sans-serif;
  --font-body:      "General Sans", "Neue Haas Grotesk", "Helvetica Brand", Helvetica, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-alt:       "Neue Haas Grotesk", "Helvetica Brand", Helvetica, system-ui, sans-serif;
  --font-mono:      "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------------------------------------------------------
     TYPE — Scale (modular, 16px base, ~1.25 ratio for body,
     wider jumps for display). Sizes in px so they survive in
     fixed-size canvases (decks, posters).
     --------------------------------------------------------- */
  --fs-mono:        12px;   /* metadata, captions */
  --fs-xs:          12px;
  --fs-sm:          14px;
  --fs-base:        16px;
  --fs-md:          18px;
  --fs-lg:          22px;
  --fs-xl:          28px;
  --fs-2xl:         36px;
  --fs-3xl:         48px;
  --fs-4xl:         64px;
  --fs-5xl:         88px;
  --fs-6xl:         128px;
  --fs-display:     180px;  /* hero/poster — billboard scale */

  /* Line heights — tight on display, generous on body */
  --lh-tight:       0.95;
  --lh-snug:        1.08;
  --lh-normal:      1.45;
  --lh-relaxed:     1.6;

  /* Tracking — keep tight; brand never uses loose tracking */
  --tr-tight:       -0.02em;
  --tr-snug:        -0.01em;
  --tr-normal:      0em;
  --tr-wide:        0.04em;   /* only for tiny eyebrow caps */

  /* Weights */
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-black:       900;

  /* ---------------------------------------------------------
     SPACING — 4px base
     --------------------------------------------------------- */
  --sp-0:           0;
  --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 — almost none. The brand is hard-edged.
     Pill is reserved for tags, badges, hint chips (see logo
     guide oval callouts).
     --------------------------------------------------------- */
  --radius-0:       0px;
  --radius-1:       2px;
  --radius-2:       4px;
  --radius-pill:    999px;

  /* ---------------------------------------------------------
     BORDERS — the heavy hairline frame is a brand signature
     (see rectangle logo configs).
     --------------------------------------------------------- */
  --bd-hair:        1px solid var(--oa-black);
  --bd-rule:        1.5px solid var(--oa-black);
  --bd-frame:       2px solid var(--oa-black);
  --bd-heavy:       4px solid var(--oa-black);

  /* ---------------------------------------------------------
     SHADOWS — used sparingly. Mostly flat. When elevation is
     needed prefer "offset block" (hard, no-blur, brand-color
     drop) over soft Material shadows.
     --------------------------------------------------------- */
  --shadow-flat:    none;
  --shadow-block:   6px 6px 0 0 var(--oa-black);
  --shadow-block-purple: 6px 6px 0 0 var(--oa-purple);
  --shadow-soft:    0 8px 24px rgba(0,0,0,0.08);

  /* ---------------------------------------------------------
     MOTION
     --------------------------------------------------------- */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:       120ms;
  --dur-base:       220ms;
  --dur-slow:       420ms;
  --dur-cinematic:  900ms;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY — drop these classes on elements.
   ============================================================ */

.oa-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}

.oa-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

/* Letter-spaced wordmark variant, per layouts page (p.21):
   "O F F  A X I S" with wide tracking and a thin weight. */
.oa-wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.6em;
  color: var(--fg-1);
}

.oa-h1 {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.oa-h2 {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.oa-h3 {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

.oa-h4 {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.oa-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  text-wrap: pretty;
}

.oa-body, p.oa-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  text-wrap: pretty;
}

.oa-caption {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.oa-mono, code.oa-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0;
  color: var(--fg-2);
}

.oa-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: var(--bd-hair);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--fg-1);
  background: transparent;
}

/* Headings shorthand — opt-in by adding .oa-prose to a container */
.oa-prose h1 { font-family: var(--font-headline); font-weight: var(--fw-black); font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); color: var(--fg-1); margin: 0 0 var(--sp-5); }
.oa-prose h2 { font-family: var(--font-headline); font-weight: var(--fw-bold);  font-size: var(--fs-3xl); line-height: var(--lh-snug);  letter-spacing: var(--tr-tight); color: var(--fg-1); margin: var(--sp-7) 0 var(--sp-4); }
.oa-prose h3 { font-family: var(--font-headline); font-weight: var(--fw-bold);  font-size: var(--fs-2xl); line-height: var(--lh-snug);  color: var(--fg-1); margin: var(--sp-6) 0 var(--sp-3); }
.oa-prose p  { font-family: var(--font-body);     font-weight: var(--fw-regular); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--fg-1); margin: 0 0 var(--sp-4); }
.oa-prose a  { color: var(--oa-blue); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.oa-prose a:hover { color: var(--oa-blue-deep); }

/* ============================================================
   ON-BRAND DARK MODE — when surface is black or deep blue,
   text flips white and accents bias toward lavender.
   ============================================================ */
.oa-on-dark {
  --fg-1: var(--oa-white);
  --fg-2: rgba(255,255,255,0.72);
  --fg-3: rgba(255,255,255,0.48);
  --border-1: rgba(255,255,255,0.18);
  --border-2: rgba(255,255,255,0.10);
  --border-strong: var(--oa-white);
  --bd-hair: 1px solid var(--oa-white);
  --bd-rule: 1.5px solid var(--oa-white);
  --bd-frame: 2px solid var(--oa-white);
  color: var(--fg-1);
}