/* =========================================================
   Hannah Zhang — Design Tokens
   colors_and_type.css
   ---------------------------------------------------------
   Single source of truth for color, type, spacing and radii.
   Pulled directly from the Brand Guidelines (Feb 2026).
   ========================================================= */

/* ---------- Web fonts ---------- */
/* Platypi (headings) + Manrope (subheads + body) — local TTFs supplied by Hannah. */
@font-face {
  font-family: 'Platypi';
  src: url('fonts/Platypi_wght_.ttf') format('truetype-variations'),
       url('fonts/Platypi-Regular.ttf') format('truetype');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Platypi';
  src: url('fonts/Platypi-Italic_wght_.ttf') format('truetype-variations'),
       url('fonts/Platypi-Italic.ttf') format('truetype');
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Manrope-Regular.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =====================================================
     1. COLOR — primary, secondary, neutrals
     Tints may be used in 20% increments where required.
     ===================================================== */

  /* Primary */
  --hz-bright-blue:    #2B7CFF;   /* Primary action / accent */
  --hz-burgundy:       #37071D;   /* Primary text on cream / dark mode bg */

  /* Secondary */
  --hz-light-blue:     #A0C8FF;   /* Used for path illustrations & accents */

  /* Neutral */
  --hz-cream:          #FFFBF3;   /* Default page background */
  --hz-white:          #FEFEFC;   /* Card / surface */
  --hz-yellow:         #F9F594;   /* Highlight / pop accent */

  /* Tints (20% increments — guideline-approved hover/press values) */
  --hz-bright-blue-80: rgba(43, 124, 255, 0.80);
  --hz-bright-blue-60: rgba(43, 124, 255, 0.60);
  --hz-bright-blue-40: rgba(43, 124, 255, 0.40);
  --hz-bright-blue-20: rgba(43, 124, 255, 0.20);

  --hz-burgundy-80:    rgba(55, 7, 29, 0.80);
  --hz-burgundy-60:    rgba(55, 7, 29, 0.60);
  --hz-burgundy-40:    rgba(55, 7, 29, 0.40);
  --hz-burgundy-20:    rgba(55, 7, 29, 0.20);

  /* =====================================================
     2. SEMANTIC COLOR ROLES
     ===================================================== */
  --bg:                var(--hz-cream);
  --surface:           var(--hz-white);
  --surface-alt:       var(--hz-cream);
  --surface-invert:    var(--hz-burgundy);

  --fg1:               var(--hz-burgundy);          /* Primary text */
  --fg2:               var(--hz-burgundy-80);       /* Secondary text */
  --fg3:               var(--hz-burgundy-60);       /* Tertiary / meta */
  --fg-on-dark:        var(--hz-cream);             /* Text on burgundy */
  --fg-on-blue:        var(--hz-cream);             /* Text on bright blue */

  --accent:            var(--hz-bright-blue);
  --accent-hover:      var(--hz-bright-blue-80);
  --accent-press:      #1F66E0;                     /* Slight darken for press */
  --accent-soft:       var(--hz-light-blue);        /* Decorative path/blob */

  --highlight:         var(--hz-yellow);            /* Yellow pop */

  --border:            var(--hz-burgundy-20);
  --border-strong:     var(--hz-burgundy-40);
  --divider:           rgba(55, 7, 29, 0.10);

  /* =====================================================
     3. TYPOGRAPHY
     Headings:    Platypi, Regular & Italic, Camel Case,
                  optical kerning, 0 tracking, 100% leading
     Subheadings: Manrope, Extrabold, ALL CAPS,
                  optical kerning, 0 tracking, 110% leading
     Body:        Manrope, Regular & Italic, Camel Case,
                  optical kerning, 0 tracking, 140% leading
     ===================================================== */
  --font-heading:      'Platypi', 'Source Serif Pro', Georgia, serif;
  --font-body:         'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:         ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (rem-based, 1rem = 16px) */
  --fs-display:        clamp(56px, 9vw, 128px);     /* Big hero "Find & forge" */
  --fs-h1:             clamp(40px, 5vw, 72px);
  --fs-h2:             clamp(32px, 3.5vw, 52px);
  --fs-h3:             28px;
  --fs-h4:             22px;
  --fs-subhead:        14px;                        /* All-caps Manrope Extrabold */
  --fs-body-lg:        20px;
  --fs-body:           17px;
  --fs-body-sm:        15px;
  --fs-caption:        13px;

  --lh-heading:        1.0;     /* Platypi 100% */
  --lh-subhead:        1.1;     /* Manrope Extrabold 110% */
  --lh-body:           1.4;     /* Manrope 140% */

  --tracking-subhead:  0.08em;  /* Loose tracking on all-caps subheads */
  --tracking-eyebrow:  0.14em;  /* Eyebrows / nav labels */

  /* Font weights */
  --fw-regular:        400;
  --fw-medium:         500;
  --fw-semibold:       600;
  --fw-bold:           700;
  --fw-extrabold:      800;

  /* =====================================================
     4. SPACING (8pt-ish, with a few half-steps)
     ===================================================== */
  --space-0:   0;
  --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;

  /* =====================================================
     5. RADII — guideline says ≥20px on containers
     ===================================================== */
  --radius-xs:  8px;
  --radius-sm:  12px;
  --radius-md:  20px;        /* Brand minimum */
  --radius-lg:  28px;
  --radius-xl:  40px;
  --radius-pill: 999px;

  /* =====================================================
     6. SHADOWS — soft, subtle. The brand is print-y, not glassy.
     ===================================================== */
  --shadow-xs: 0 1px 2px rgba(55, 7, 29, 0.06);
  --shadow-sm: 0 2px 6px rgba(55, 7, 29, 0.08);
  --shadow-md: 0 8px 24px rgba(55, 7, 29, 0.10);
  --shadow-lg: 0 20px 48px rgba(55, 7, 29, 0.14);

  /* =====================================================
     7. MOTION
     ===================================================== */
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-soft:   cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:        140ms;
  --dur-base:        220ms;
  --dur-slow:        420ms;

  /* =====================================================
     8. LAYOUT
     ===================================================== */
  --container-max:   1200px;
  --gutter:          24px;
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   Apply these as a starting baseline anywhere this CSS is imported.
   ========================================================= */
html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: 0;
  color: var(--fg1);
  margin: 0 0 var(--space-4) 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

/* "Subheading" pattern from the guidelines: Manrope Extrabold, ALL CAPS, 110% lh */
.subhead, .eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
  letter-spacing: var(--tracking-subhead);
  text-transform: uppercase;
  color: var(--fg1);
}

p {
  margin: 0 0 var(--space-4) 0;
  text-wrap: pretty;
  max-width: 65ch; /* Keep line length 45-70 chars per guidelines */
}

em, i { font-style: italic; }
strong, b { font-weight: var(--fw-bold); }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--accent-press); }

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

hr {
  border: 0;
  border-top: 1px solid var(--divider);
  margin: var(--space-6) 0;
}

::selection {
  background: var(--hz-yellow);
  color: var(--hz-burgundy);
}