/* ============================================================================
   Operation Outbreak — Colors & Type
   Source of truth: OO Style Guide MAY 2025
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Web fonts — bundled brand font files in /fonts
   Variable fonts preferred; static weight files included as fallback.
   Inter is loaded from Google Fonts (the site uses it as a UI fallback).
   ---------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300..800&display=swap");

/* Manrope (sans / display) */
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Manrope-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-ExtraLight.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-Light.ttf") format("truetype");      font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-Regular.ttf") format("truetype");    font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-Medium.ttf") format("truetype");     font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-SemiBold.ttf") format("truetype");   font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-Bold.ttf") format("truetype");       font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-ExtraBold.ttf") format("truetype");  font-weight: 800; font-style: normal; font-display: swap; }

/* Geist Mono (mono / labels) — variable + static fallbacks */
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/GeistMono-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Static fallbacks (so subsetting / older runtimes still get correct weights) */
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Thin.ttf") format("truetype");        font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-ExtraLight.ttf") format("truetype");  font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Light.ttf") format("truetype");       font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Regular.ttf") format("truetype");     font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Medium.ttf") format("truetype");      font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-SemiBold.ttf") format("truetype");    font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Bold.ttf") format("truetype");        font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-ExtraBold.ttf") format("truetype");   font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Black.ttf") format("truetype");       font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* ==========================================================================
     COLOR — Primary brand palette
     ========================================================================== */

  /* Indigo (primary brand color) */
  --oo-indigo-700: #3F4AD1;       /* deeper indigo */
  --oo-indigo-600: #5A65E5;       /* PRIMARY — logo gradient bottom, brand blue */
  --oo-indigo-500: #7387F9;       /* lighter indigo accent */

  /* Coral (secondary / alert) */
  --oo-coral-700:  #D24F47;       /* deep coral — production `--color-red` */
  --oo-coral-600:  #ED5D5D;       /* coral */
  --oo-coral-500:  #FF7171;       /* light coral */

  /* Violet (signature gradient) */
  --oo-violet-500: #865AFF;       /* signature violet — top of logo gradient */

  /* Mint (signature gradient) */
  --oo-mint-300:   #86F7B9;       /* light mint — production `--color-light-teal` */
  --oo-mint-500:   #58DBA6;       /* mint */
  --oo-mint-700:   #1CB192;       /* teal — production `--color-teal` */

  /* ==========================================================================
     COLOR — Neutrals
     ========================================================================== */
  --oo-black:      #0B090A;       /* near-black, brand black */
  --oo-ink:        #1F2528;       /* ink (charcoal blue-black) */
  --oo-graphite:   #3A3E3F;       /* graphite */
  --oo-silver:     #D3D3D3;       /* silver */
  --oo-fog:        #EFEFEF;       /* fog (subtle bg) */
  --oo-white:      #FCFCFC;       /* off-white */
  --oo-pure-white: #FFFFFF;

  /* ==========================================================================
     COLOR — Gradients (approved combinations only)
     ========================================================================== */
  --oo-gradient-violet-mint: linear-gradient(135deg, #865AFF 0%, #58DBA6 100%); /* @kind color */
  --oo-gradient-indigo:      linear-gradient(180deg, #7387F9 0%, #5A65E5 50%, #865AFF 100%); /* @kind color */ /* the logo "8" gradient */
  --oo-gradient-mint:        linear-gradient(135deg, #86F7B9 0%, #2AAD9A 100%); /* @kind color */
  --oo-gradient-ink:         linear-gradient(180deg, #3A3E3F 0%, #1F2528 100%); /* @kind color */
  --oo-gradient-coral:       linear-gradient(135deg, #FF7171 0%, #DB3A3A 100%); /* @kind color */

  /* ==========================================================================
     SEMANTIC color tokens
     ========================================================================== */
  /* Surfaces */
  --bg:            var(--oo-white);
  --bg-subtle:     var(--oo-fog);
  --bg-inverse:    var(--oo-ink);
  --surface:       var(--oo-pure-white);
  --surface-2:     var(--oo-fog);

  /* Foreground */
  --fg:            var(--oo-black);
  --fg-1:          var(--oo-black);        /* primary text */
  --fg-2:          var(--oo-graphite);     /* secondary text */
  --fg-3:          #6B7173;                /* tertiary / muted */
  --fg-inverse:    var(--oo-white);

  /* Borders / dividers */
  --border:        var(--oo-silver);
  --border-subtle: var(--oo-fog);
  --border-strong: var(--oo-ink);

  /* Brand accents (semantic) */
  --accent:        var(--oo-indigo-600);
  --accent-hover:  var(--oo-indigo-700);
  --accent-soft:   color-mix(in oklab, var(--oo-indigo-600) 12%, transparent);

  /* Status */
  --success:       var(--oo-mint-700);
  --warning:       #E89B3C; /* derived warm — not in guide, used sparingly */
  --danger:        var(--oo-coral-700);
  --info:          var(--oo-indigo-500);

  /* Outbreak status — semantic colors used in the app */
  --status-sick:      var(--oo-coral-700);
  --status-exposed:   var(--oo-coral-500);
  --status-healthy:   var(--oo-mint-700);
  --status-vaccinated:var(--oo-indigo-600);

  /* ==========================================================================
     TYPOGRAPHY — Families
     Production stack: Inter (UI), Manrope (display + body), Geist Mono (labels).
     ========================================================================== */
  --font-sans:    "Manrope", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* @kind font */
  --font-ui:      "Inter", "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif; /* @kind font */
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* @kind font */
  --font-display: var(--font-sans); /* @kind font */ /* Manrope Light for headlines */

  /* Weights */
  --fw-light:     300; /* @kind font */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */

  /* ==========================================================================
     TYPE SCALE
     ========================================================================== */
  --fs-micro:    11px; /* @kind font */ /* footnotes, metadata */
  --fs-eyebrow:  12px; /* @kind font */ /* eyebrow / SECTION HEAD label */
  --fs-caption:  13px; /* @kind font */
  --fs-body-sm:  14px; /* @kind font */
  --fs-body:     16px; /* @kind font */ /* body */
  --fs-subhead:  19px; /* @kind font */ /* subhead */
  --fs-section:  22px; /* @kind font */ /* section-head (mono bold) */
  --fs-h3:       28px; /* @kind font */
  --fs-h2:       40px; /* @kind font */
  --fs-h1:       64px; /* @kind font */ /* headline (Manrope Light) */
  --fs-display:  96px; /* @kind font */ /* hero display */

  /* Line heights */
  --lh-tight:    1.05; /* @kind font */
  --lh-snug:     1.18; /* @kind font */
  --lh-normal:   1.45; /* @kind font */
  --lh-relaxed:  1.6; /* @kind font */

  /* Tracking */
  --tr-tight:    -0.02em; /* @kind font */
  --tr-normal:   0; /* @kind font */
  --tr-wide:     0.04em; /* @kind font */
  --tr-eyebrow:  0.14em; /* @kind font */ /* eyebrows & section heads use generous tracking */

  /* ==========================================================================
     SPACING / RADII / SHADOWS / MOTION
     ========================================================================== */
  --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;
  --space-10: 128px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;       /* card / squircle photo frame */
  --radius-pill: 999px;

  /* Shadows (subtle; brand leans flat) */
  --shadow-1: 0 1px 2px rgba(11,9,10,.04), 0 1px 1px rgba(11,9,10,.04);
  --shadow-2: 0 4px 10px rgba(11,9,10,.06), 0 2px 4px rgba(11,9,10,.04);
  --shadow-3: 0 16px 32px rgba(11,9,10,.10), 0 4px 8px rgba(11,9,10,.06);
  --shadow-glow-indigo: 0 0 0 1px var(--oo-indigo-600), 0 8px 24px color-mix(in oklab, var(--oo-indigo-600) 35%, transparent);

  /* Motion */
  --ease-out:    cubic-bezier(.2, .8, .2, 1); /* @kind other */
  --ease-in-out: cubic-bezier(.6, 0, .3, 1); /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */
}

/* ----------------------------------------------------------------------------
   SEMANTIC type styles — drop on elements directly OR use the classnames
   ---------------------------------------------------------------------------- */
.oo-display, h1.oo-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);            /* Manrope Light — headline */
  font-size:   var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}
.oo-headline-xl {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size:   var(--fs-display);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--fg-1);
}

h2.oo-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}
h3.oo-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

.oo-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

.oo-section-head {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-section);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.oo-subhead {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-subhead);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.oo-body, p.oo-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.oo-pull-quote {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-section);
  line-height: var(--lh-snug);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.oo-micro {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-micro);
  line-height: var(--lh-normal);
  letter-spacing: 0.02em;
  color: var(--fg-3);
}

code, .oo-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg-1);
  background: var(--oo-fog);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-xs);
}

/* ----------------------------------------------------------------------------
   Bare element resets when this file is the only stylesheet
   ---------------------------------------------------------------------------- */
html, body { background: var(--bg); color: var(--fg-1); font-family: var(--font-sans); }
::selection { background: color-mix(in oklab, var(--oo-indigo-500) 35%, transparent); }

/* ----------------------------------------------------------------------------
   PRODUCTION TOKEN ALIASES
   Lifted from the live operationoutbreak.org CSS so code authored against the
   production naming convention works against this design system unchanged.
   ---------------------------------------------------------------------------- */
:root {
  /* Color aliases — match the prod `--color-*` names */
  --color-black:       var(--oo-black);
  --color-white:       var(--oo-pure-white);
  --color-off-black:   var(--oo-black);
  --color-off-white:   var(--oo-white);
  --color-light-grey:  var(--oo-fog);
  --color-grey:        var(--oo-silver);
  --color-mid-grey:    var(--oo-graphite);
  --color-dark-grey:   var(--oo-ink);
  --color-blue:        #0075FF;                /* production CTA blue */
  --color-blue-2:      var(--oo-indigo-600);
  --color-light-blue:  var(--oo-indigo-500);
  --color-dark-blue:   var(--oo-indigo-700);
  --color-purple:      var(--oo-violet-500);
  --color-red:         var(--oo-coral-700);
  --color-teal:        var(--oo-mint-700);
  --color-light-teal:  var(--oo-mint-300);
  --color-black-gradient:        linear-gradient(90deg, #0B090A, #1F2528, #3A3E3F); /* @kind color */
  --color-black-white-gradient:  linear-gradient(180deg, #1F2528, #1F2528, #EFEFEF); /* @kind color */

  /* Font aliases */
  --ff-base:       var(--font-ui); /* @kind font */ /* Inter on the website */
  --ff-manrope:    "Manrope", sans-serif; /* @kind font */
  --ff-geist-mono: "Geist Mono", monospace; /* @kind font */

  /* Weight aliases */
  --fw-extra-light: 200; /* @kind font */
  --fw-light:       300; /* @kind font */
  --fw-regular:     400; /* @kind font */
  --fw-medium:      500; /* @kind font */
  --fw-semi:        600; /* @kind font */
  --fw-bold:        700; /* @kind font */
  --fw-extra:       800; /* @kind font */
  --fw-heavy:       900; /* @kind font */

  /* Gutters — exact match to the production scale */
  --gutter-xxxsmall: 8px;
  --gutter-xxsmall:  16px;
  --gutter-xsmall:   24px;
  --gutter-small:    32px;
  --gutter-medium:   64px;
  --gutter-large:    96px;
  --gutter-xlarge:   192px;

  --transition: 250ms; /* @kind other */
}