/* Webfonts. Montserrat = EN geometric grotesque matching reference 1-02 headings.
   Noto Sans TC = professional Traditional-Chinese pairing (same geometric, humanist-clean feel).
   NOTE: reference type was hand-matched to Google Fonts — see readme "Font substitutions". */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Noto+Sans+TC:wght@400;500;700;900&display=swap');

/* ============ COLOR SYSTEM ============
   Built from references 1-01 & 1-02 (pastel core) and 1-03 & 1-04 (saturated accents).
   Pastels carry most surface/geometry; saturated accents add energy & emphasis. */
:root {
  /* --- Pastel core (primary geometric fills, translucent overlaps) --- */
  --pastel-sky: #9FD6DD;      /* soft cyan-teal */
  --pastel-blue: #A6D6EC;     /* sky blue */
  --pastel-mint: #BFE3D0;     /* sage mint */
  --pastel-pink: #F6C3CB;     /* soft pink */
  --pastel-coral: #F3A6A5;    /* warm coral (OPEN pill) */
  --pastel-yellow: #FBE6A0;   /* butter yellow */
  --pastel-peach: #F6D8B3;    /* peach / tan */

  /* --- Saturated accents (headlines, panels, high-energy geometry) --- */
  --accent-blue: #1E9FEF;
  --accent-teal: #1FB894;
  --accent-magenta: #EC4E9B;
  --accent-orange: #F2A03D;
  --accent-gold: #F6B426;
  --accent-maroon: #7C1E2E;

  /* --- Neutrals --- */
  --ink: #2E2E2E;             /* primary charcoal text */
  --ink-soft: #5A5A5A;        /* secondary text */
  --ink-faint: #9A9A9A;       /* muted / caption */
  --cream: #FBF8F1;           /* warm off-white canvas (1-02) */
  --paper: #FFFFFF;           /* clean white canvas (1-01) */
  --line: rgba(46,46,46,0.16);/* thin-line geometry & rules */
  --line-strong: rgba(46,46,46,0.45);

  /* --- Semantic aliases --- */
  --canvas: var(--cream);
  --canvas-clean: var(--paper);
  --text-title: var(--ink);
  --text-body: var(--ink-soft);
  --text-muted: var(--ink-faint);
  --text-on-dark: #FBF8F1;
  --text-on-accent: #FFFFFF;

  --panel-dark: #2B2B2B;       /* dark info band (1-03) */
  --panel-accent: var(--accent-blue);
  --panel-teal: var(--accent-teal);

  --tag-bg: var(--pastel-coral);
  --tag-text: #FFFFFF;

  --shape-outline: var(--line-strong);
  --dotgrid: var(--pastel-sky);
  --grid-line: rgba(255,255,255,0.7);
}

/* ============ TYPOGRAPHY ============
   EN: Montserrat (geometric grotesque, matches ref 1-02).
   ZH: Noto Sans TC (professional Traditional-Chinese pairing).
   Titles are heavy & tight; info copy stays clean, readable, professional. */
:root {
  --font-display: 'Montserrat', 'Noto Sans TC', system-ui, sans-serif;
  --font-body: 'Montserrat', 'Noto Sans TC', system-ui, sans-serif;
  --font-zh: 'Noto Sans TC', 'Montserrat', system-ui, sans-serif;

  /* weights */
  --w-regular: 400; /* @kind font */
  --w-medium: 500; /* @kind font */
  --w-semibold: 600; /* @kind font */
  --w-bold: 700; /* @kind font */
  --w-heavy: 800; /* @kind font */
  --w-black: 900; /* @kind font */

  /* fluid-ready type scale (px base; templates override with clamp/px) */
  --fs-display: 96px;   /* huge poster headline */
  --fs-h1: 64px;
  --fs-h2: 44px;
  --fs-h3: 30px;
  --fs-lead: 22px;      /* subtitle / lead */
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-eyebrow: 15px;   /* letter-spaced label */
  --fs-caption: 12px;

  --lh-tight: 0.98;     /* @kind font */
  --lh-snug: 1.12;      /* @kind font */
  --lh-normal: 1.5;     /* @kind font */

  --ls-eyebrow: 0.28em; /* wide letter-spacing (ref 1-04 "YOUR CREATIVE") */
  --ls-title: -0.01em;
  --ls-tight: -0.02em;
  --ls-normal: 0; /* @kind font */
}

/* ============ SPACING & RADII ============
   4px base grid. Card padding scales with size. */
:root {
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* card outer padding by size */
  --pad-square: 64px;
  --pad-landscape: 96px;
  --pad-portrait: 80px;
  --pad-banner: 48px;

  /* radii */
  --r-none: 0px;
  --r-sm: 6px;
  --r-md: 12px;
  --r-pill: 999px;

  /* geometry stroke */
  --stroke-thin: 1.5px;
  --stroke-med: 2.5px;
  --stroke-bold: 4px;
}