/* ═══════════════════════════════════════════════
   tokens.css — Design Tokens (vh/vw-based)
   All spacing, typography, layout values derive
   from viewport units. px used ONLY for hairlines
   via var(--border-width).
   ═══════════════════════════════════════════════ */

:root {
  /* ═══ COLORS ═══ */
  --color-accent: #fe5000;
  --color-accent-dim: rgba(254, 80, 0, .06);
  --color-accent-soft: rgba(254, 80, 0, .12);
  --color-accent-mid: rgba(254, 80, 0, .25);
  --color-accent-strong: rgba(254, 80, 0, .50);
  --color-text: #2c2c2c;
  --color-text-secondary: #555;
  --color-text-muted: #888;
  --color-bg: #fff;
  --color-border: #e8e6e0;
  --color-border-soft: #e0ddd6;

  /* ═══ TYPOGRAPHY ═══
     rem/em only within clamp() as min/max boundaries.
     Core sizing uses vh. */
  --ff-sans: 'Noto Sans', sans-serif;
  --ff-mono: 'Noto Sans Mono', 'Courier New', monospace;
  --fs-base: clamp(0.75rem, 2.4vh, 1.125rem);
  --fs-lg: calc(var(--fs-base) * 2.5);               /* derived from fs-base — matches original + template */
  --fs-md: calc(var(--fs-base) * 1.25);
  --fs-sm: calc(var(--fs-base) * .75);
  --fs-xs: clamp(0.5rem, 1.5vh, 0.7rem);
  --lh-heading: 1.1;
  --lh-body: 1.6;
  --lh-tight: 1;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-bold: 700;
  --ls-tight: 0.02em;
  --ls-normal: 0.04em;
  --ls-wide: 0.1em;
  --ls-label: 0.18em;
  --ls-nav: 0.2em;

  /* ═══ SPACING (all vh) ═══ */
  --space-02: 0.25vh;
  --space-03: 0.3vh;
  --space-04: 0.4vh;
  --space-05: 0.6vh;
  --space-07: 0.7vh;
  --space-1: 1.2vh;
  --space-15: 1.8vh;
  --space-2: 2.5vh;
  --space-3: 3.5vh;
  --space-4: 5vh;
  --space-5: 6vh;
  --space-6: 7vh;
  --space-8: 9vh;

  /* ═══ LAYOUT ═══ */
  --side-pad: clamp(0px, calc(50vw - 50vh), calc(100vw / 6));
  --nav-font: clamp(12px, 1.5vh, 2vh);
  --img-height: 45vh;
  --section-gap: 6vh;
  --border-width: 1px;       /* only px — hairline exception */
  --full-bleed: calc(-50vw + 50%);

  /* ═══ TEMPLATE ALIGNED ACCENT OPACITIES ═══ */
  --a-d: rgba(254,80,0,.06);         /* accent dim — template canonical */
  --a-r: rgba(254,80,0,.12);         /* accent regular — template canonical */

  /* ═══ BAND SYSTEM — template canonical names ═══ */
  --bar-w: 0.5vw;                    /* template canonical: bar width */
  --sec-img-h: 45vh;                 /* template canonical: project image height */
  --band-w: 100vw;
  --band-item-w: 20vw;
  --trigger-w: clamp(44px, 48vw, 48vw);
  --band-bar-w: var(--bar-w);        /* alias — template canonical */
  --band-close-ms: 300ms;

  /* ═══ SECTION RHYTHM — template canonical names ═══ */
  --pad-sec-y: calc(var(--fs-base) * 6);  /* section vertical padding — matches original --sp-6 */
  --pad-x: 0;                        /* section horizontal padding (for flush-left offset) */

  /* ═══ GRIDS ═══ */
  --grid-2col: 1fr 1fr;
  --grid-3col: repeat(3, 1fr);
  --grid-icon: 56px 1fr;
  --gap-row: calc(var(--fs-base) * 0.5);
  --gap-col: var(--space-1);
  --gap-card: var(--space-1);
}