/* ============================================================
   OAO Brand Tokens — v1
   Canonical CSS variables for the OAO brand. Single source of
   truth for colour, typography, spacing, radius.

   Source: OAO Styleguide V1 2024 (NonSpace) + figma-design-tokens v3.
   ============================================================ */

:root {
  /* ---------- COLOUR — Primary neutrals ---------- */
  --oao-black:           #000000;
  --oao-white:           #FFFFFF;

  /* ---------- COLOUR — Secondary neutrals ---------- */
  --oao-grey-50:         #F2F2F2;  /* Subtle backgrounds, inactive progress bar */
  --oao-grey-100:        #E6E6E6;  /* Lines, borders, inactive states */
  --oao-grey-400:        #999999;  /* Input borders, upcoming progress */
  --oao-grey-600:        #666666;  /* Secondary text, scrollbar thumb */
  --oao-grey-900:        #1A1A1A;  /* Dark backgrounds, near-black */

  /* ---------- COLOUR — Brand accents (use sparingly) ---------- */
  --oao-pink:            #F08BF9;
  --oao-pink-light:      #FFD9FF;
  --oao-green:           #75E449;
  --oao-green-light:     #CAF4C4;
  --oao-blue:            #4D96F3;
  --oao-blue-light:      #C6EAFF;

  /* ---------- COLOUR — Brand gradients (UI fill) ---------- */
  /* Used in flat brand fills, accent bars, exit slides */
  --oao-gradient-green-pink: linear-gradient(
    90deg,
    var(--oao-green) 25%,
    var(--oao-pink) 75%
  );
  --oao-gradient-green-blue: linear-gradient(
    90deg,
    var(--oao-green) 25%,
    var(--oao-blue) 75%
  );

  /* ---------- COLOUR — Icon stroke gradient (saturated) ---------- */
  /* Used in illustrated brand icons. More saturated than UI gradient. */
  --oao-icon-pink:       #FF85FF;
  --oao-icon-green:      #43E922;
  --oao-icon-blue:       #1099F9;

  /* ---------- COLOUR — Product score (product UI only) ---------- */
  --oao-score-poor:        #FF5569;
  --oao-score-poor-light:  #FFCBD1;
  --oao-score-average:     #FFA845;
  --oao-score-average-light: #FBE9D4;
  --oao-score-good:        #21D291;
  --oao-score-good-light:  #D1F9E2;

  /* ---------- TYPOGRAPHY ---------- */
  --oao-font:            "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --oao-letter-spacing:  -0.02em;

  /* Weights */
  --oao-weight-regular:  400;
  --oao-weight-medium:   500;

  /* Type scale (px) — desktop */
  --oao-size-hero:       72px;   /* Hero headline */
  --oao-size-display:    48px;   /* Section headline */
  --oao-size-h2:         40px;   /* Subsection headline */
  --oao-size-h3:         32px;   /* Major heading */
  --oao-size-h4:         24px;   /* Standard heading */
  --oao-size-h5:         20px;   /* Minor heading */
  --oao-size-body:       16px;   /* Body copy */
  --oao-size-small:      14px;   /* Captions, meta */
  --oao-size-tiny:       12px;   /* Tags, labels */

  /* Line heights */
  --oao-leading-tight:   1.1;
  --oao-leading-snug:    1.25;
  --oao-leading-normal:  1.45;
  --oao-leading-loose:   1.6;

  /* ---------- SPACING (8px base grid) ---------- */
  --oao-space-1:         4px;
  --oao-space-2:         8px;
  --oao-space-3:         12px;
  --oao-space-4:         16px;
  --oao-space-5:         24px;
  --oao-space-6:         32px;
  --oao-space-7:         48px;
  --oao-space-8:         64px;
  --oao-space-9:         96px;
  --oao-space-10:        128px;

  /* ---------- RADIUS ---------- */
  --oao-radius:          8px;     /* Default for cards, images, boxes */
  --oao-radius-small:    4px;
  --oao-radius-large:    16px;

  /* ---------- BORDERS ---------- */
  --oao-border:          1px solid var(--oao-grey-100);
  --oao-border-strong:   1px solid var(--oao-grey-400);

  /* ---------- LAYOUT ---------- */
  --oao-page-max:        1200px;  /* Max content width */
  --oao-page-gutter:     48px;    /* Outer padding on desktop */
  --oao-section-gap:     128px;   /* Vertical rhythm between sections */
}

/* ============================================================
   Base reset — minimal, on-brand
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--oao-font);
  font-size: var(--oao-size-body);
  line-height: var(--oao-leading-normal);
  letter-spacing: var(--oao-letter-spacing);
  color: var(--oao-black);
  background: var(--oao-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

img, svg, video, audio {
  display: block;
  max-width: 100%;
}

img, video {
  border-radius: var(--oao-radius);
}

/* Typography defaults */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--oao-weight-medium);
  letter-spacing: var(--oao-letter-spacing);
  line-height: var(--oao-leading-tight);
  margin: 0 0 var(--oao-space-5) 0;
}

p {
  margin: 0 0 var(--oao-space-4) 0;
  max-width: 70ch;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--oao-grey-400);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.15s;
}

a:hover {
  text-decoration-color: var(--oao-black);
}

::selection {
  background: var(--oao-black);
  color: var(--oao-white);
}