/* ============================================================
   HANNA CHANG — DESIGN SYSTEM
   colors_and_type.css  ·  foundational + semantic tokens
   ============================================================ */

/* --- Webfonts ---------------------------------------------------------------
   NOTE: original portfolio fonts were not supplied. These are the closest
   high-quality free matches (see README "Font substitution"):
   · Geist        → primary neo-grotesque (clean, tech-forward, SF)
   · Geist Mono   → eyebrows / metadata / code labels
   The playful accent is the SAME grotesque at heavy weight + tight tracking —
   personality comes from color, the pill shape, and motion, not a script font.
   Replace with the real files in /fonts and swap these imports if provided. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500&family=Comfortaa:wght@500;600;700&family=Pixelify+Sans:wght@500;600;700&family=Inder&display=swap');

:root {
  /* ---------- CORE PALETTE ---------- */
  --paper:        #FFFFFF;   /* primary background — bright white */
  --paper-soft:   #F6F6F4;   /* faint warm off-white section wash */
  --ink:          #0A0A0A;   /* near-black: headlines, wordmark    */
  --ink-soft:     #4A4A4A;   /* body text on light                 */
  --muted:        #9A9A9A;   /* metadata, captions, disabled       */
  --line:         #ECECEC;   /* hairline dividers & borders        */

  /* ---------- BRAND ACCENTS ---------- */
  --blue:         #2600FF;   /* THE signature — electric indigo    */
  --blue-press:   #1C00C2;   /* pressed / active blue              */
  --blue-tint:    #ECE9FF;   /* blue wash backgrounds              */
  --lime:         #D5F821;   /* chartreuse highlight pill          */
  --grape:        #26134B;   /* deep aubergine — feature cards     */
  --grape-soft:   #3A2467;   /* lifted grape (gradients, hovers)   */
  --lavender:     #C7C1E6;   /* soft periwinkle pill / chip        */
  --lavender-2:   #E4E1F0;   /* lightest lavender wash             */
  --gold:         #E0A33A;   /* warm "daydreamer" highlight        */

  /* ---------- ON-COLOR TEXT ---------- */
  --on-blue:      #FFFFFF;
  --on-lime:      #1A1A00;
  --on-grape:     #FFFFFF;
  --on-lavender:  #2600FF;

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-accent: var(--font-sans); /* playful accent = heavy grotesque, not script */
  --font-mark: 'Inder', var(--font-sans); /* the c: smiley — open aperture reads as a sideways smile */
  --font-pixel: 'Pixelify Sans', var(--font-sans); /* retro pixel accent — obsession pills */

  /* ---------- TYPE SCALE (px @ desktop) ---------- */
  --fs-display: clamp(56px, 9vw, 132px); /* footer wordmark, hero moments */
  --fs-h1:      40px;
  --fs-h2:      30px;
  --fs-h3:      22px;
  --fs-lead:    20px;   /* hero intro line               */
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-eyebrow: 11px;   /* mono eyebrows / metadata      */

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-body:    1.5;

  --tracking-eyebrow: 0.14em;
  --tracking-tight:  -0.02em;

  /* ---------- SPACING (4px base) ---------- */
  --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 ---------- */
  --r-sm:   6px;    /* badges, small chips         */
  --r-md:   14px;   /* inputs, small cards         */
  --r-lg:   20px;   /* feature cards               */
  --r-pill: 999px;  /* obsession pills, buttons    */

  /* ---------- SHADOWS / ELEVATION ---------- */
  --shadow-sm:  0 1px 2px rgba(10,10,10,.05);
  --shadow-md:  0 8px 24px rgba(10,10,10,.08);
  --shadow-lg:  0 24px 60px rgba(38,0,255,.14);
  --shadow-pill:0 4px 14px rgba(38,0,255,.22); /* lifted playful pills */

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1); /* playful overshoot */
  --dur-fast:   140ms;
  --dur-med:    260ms;
  --dur-slow:   480ms;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
.hc-display {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  color: var(--ink);
}
.hc-h1 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--ink); }
.hc-h2 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--ink); }
.hc-h3 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--ink); }
.hc-lead { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-lead); line-height: var(--lh-snug); color: var(--ink); }
.hc-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft); }
.hc-small { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--muted); }
.hc-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}
/* playful accent — pills, highlighted labels (bold grotesque, tight tracking) */
.hc-accent { font-family: var(--font-accent); font-weight: 700; letter-spacing: -0.01em; }

/* signature colon mark, e.g. "Hanna c:" — rounded open font reads as a sideways smile */
.hc-mark-colon { font-family: var(--font-mark); color: var(--blue); font-weight: 700; letter-spacing: 0.02em; }