/* =============================================================
   Analog.Fail Design System — Core Tokens
   Colors, Typography, Spacing, Shadows, Radii
   ============================================================= */

@font-face {
  font-family: 'Matamata';
  src: url('fonts/Matamata-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Matamata';
  src: url('fonts/Matamata-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/DMSans-Regular-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/DMSans-Regular-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/DMSans-Italic-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/DMSans-Italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/DMSerifDisplay-Regular-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/DMSerifDisplay-Regular-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/DMSerifDisplay-Italic-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/DMSerifDisplay-Italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- Brand Colors ---------- */
  --brand-black:     #1d1d1b;  /* dark zones */
  --brand-yellow:    #ffed00;  /* ONLY on dark / accent lines */
  --brand-blue-dark: #00476f;  /* headlines, links, buttons on light */
  --brand-blue-mid:  #87c0ea;  /* logo dot, decoration */
  --brand-blue-light:#bce4fa;  /* logo "FAIL", section numbers */

  /* ---------- Surface Colors ---------- */
  --bg-page:         #f7f6f3;  /* warm white, page bg */
  --bg-card:         #ffffff;
  --bg-dark:         #1d1d1b;
  --bg-accent:       rgba(0, 71, 111, 0.05);

  /* ---------- Text Colors (light zone) ---------- */
  --text-primary:    #2d2d2b;
  --text-secondary:  #555550;
  --text-muted:      #6d6d65;

  /* ---------- Text Colors (dark zone) ---------- */
  --text-on-dark:         #ffffff;
  --text-on-dark-body:    #c4c4bc;
  --text-on-dark-muted:   #a8a8a0;

  /* ---------- Borders ---------- */
  --border:          #e5e3de;
  --border-strong:   #c8c6bf;

  /* ---------- Semantic (legacy aliases) ---------- */
  --fg1: var(--text-primary);
  --fg2: var(--text-secondary);
  --fg3: var(--text-muted);
  --link: var(--brand-blue-dark);
  --link-hover: #00385a;

  /* ---------- Brand Gradient Strip ---------- */
  --gradient-strip: linear-gradient(90deg, #ffed00 0%, #87c0ea 50%, #bce4fa 100%);

  /* ---------- Typography Stacks ---------- */
  --font-logo:    'Matamata', 'Arial Black', sans-serif;
  --font-serif:   'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-sans:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    var(--font-sans);

  /* ---------- Type Scale ---------- */
  --fs-logo:      1.6rem;     /* 25.6px */
  --fs-h1:        2rem;       /* 32px  — Hero claim (DM Serif) */
  --fs-h2:        1.5rem;     /* 24px  — section title (DM Serif) */
  --fs-h3:        0.95rem;    /* subtitle / card title */
  --fs-section-num: 3.5rem;   /* decorative numbers */
  --fs-body:      1rem;       /* 16px */
  --fs-body-sm:   0.88rem;
  --fs-label:     0.8rem;
  --fs-caption:   0.78rem;
  --fs-micro:     0.72rem;

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

  --lh-tight:     1.25;
  --lh-heading:   1.3;
  --lh-body:      1.7;
  --lh-ui:        1.6;

  --tracking-caps: 0.08em;
  --tracking-logo: 0.04em;

  /* ---------- Spacing (8-step) ---------- */
  --sp-1:   0.25rem;   /*  4px */
  --sp-2:   0.5rem;    /*  8px */
  --sp-3:   1rem;      /* 16px */
  --sp-4:   1.5rem;    /* 24px */
  --sp-5:   2rem;      /* 32px */
  --sp-6:   3rem;      /* 48px */
  --sp-7:   4rem;      /* 64px */
  --sp-8:   6rem;      /* 96px */

  /* ---------- Border Radii ---------- */
  --r-sm:   4px;   /* tags */
  --r-md:   8px;   /* default: cards, buttons, badges, callouts */
  --r-lg:   12px;  /* large containers, modals */

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.03);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.08);

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-pad: 2rem;

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:  150ms;
  --dur-base:  200ms;
  --dur-slow:  500ms;
}

/* =============================================================
   Base elements — semantic defaults
   ============================================================= */

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--brand-blue-dark);
  margin: 0 0 var(--sp-3);
}

h2, .h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--brand-blue-dark);
  margin: 0 0 var(--sp-3);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-ui);
  color: var(--text-primary);
  margin: 0 0 var(--sp-2);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
  margin: 0 0 var(--sp-2);
}

p {
  margin: 0 0 var(--sp-3);
  color: var(--text-primary);
  line-height: var(--lh-body);
}

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

small, .caption {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

code, pre {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.875em;
}

/* Utility: the brand gradient strip that links dark→light zones */
.gradient-strip {
  height: 3px;
  width: 100%;
  background: var(--gradient-strip);
  border: none;
  display: block;
}

/* Dark zone helper */
.dark-zone {
  background: var(--bg-dark);
  color: var(--text-on-dark-body);
}
.dark-zone h1, .dark-zone h2, .dark-zone h3 { color: var(--text-on-dark); }