/* =============================================================
   Zuno Works — Design Tokens
   Clean Lab direction: paper, ink, grid, one signal color.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300,0,-25');

:root {
  /* ---------- Color — base scale (oklch) ---------- */
  --paper: #F5F5F2;       /* page background */
  --paper-2: #EDEDE8;     /* raised surfaces, subtle */
  --paper-3: #E4E4DE;     /* very subtle panel */
  --ink: #0B0B0C;         /* body text, borders */
  --ink-2: #2A2A2D;       /* secondary text */
  --ink-3: #55555A;       /* tertiary text */
  --ink-4: #8A8A8E;       /* muted, hints */
  --grid: #D8D8D2;        /* hairline on paper */
  --grid-2: #C4C4BE;      /* stronger hairline */

  /* ---------- Color — accents ---------- */
  --signal: #1B4DFF;      /* Clean-Lab default (override per direction) */
  --signal-2: #0A3AE6;    /* pressed */
  --signal-ink: #F5F5F2;  /* foreground on --signal */

  /* Brand colors — from Zuno Works character logo */
  --brand-yellow: #FFE600; /* primary fill, large and loud */
  --brand-red: #E8261C;    /* outline / accent */
  --brand-ink: #1A1A1A;    /* character lines */

  --ok: #1A7F3C;          /* subdued green */
  --warn: #B85C00;        /* subdued amber */
  --err: #B5241C;         /* subdued red */

  /* ---------- Semantic foreground / background ---------- */
  --fg-1: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --fg-muted: var(--ink-4);
  --bg-1: var(--paper);
  --bg-2: var(--paper-2);
  --bg-3: var(--paper-3);
  --border: var(--grid);
  --border-strong: var(--ink);

  /* ---------- Typography ---------- */
  --font-jp: 'Zen Kaku Gothic New', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-ui: var(--font-jp);

  /* Type scale (px-ish, rem-based) */
  --fs-12: 0.75rem;     /* 12 */
  --fs-13: 0.8125rem;   /* 13 */
  --fs-14: 0.875rem;    /* 14 */
  --fs-16: 1rem;        /* 16 — body */
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-80: 5rem;
  --fs-112: 7rem;       /* display */

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.6;
  --lh-loose: 1.8;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-xwide: 0.2em;  /* for uppercase EN labels */

  /* ---------- Spacing (4px base) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --sp-32: 128px;
  --sp-48: 192px;

  /* ---------- Radii (nearly zero) ---------- */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;     /* rarely */
  --radius-pill: 999px; /* only for status dots / indicators */

  /* ---------- Elevation ---------- */
  /* No drop shadows on cards/buttons. Only focus ring. */
  --ring-focus: 0 0 0 2px var(--signal);

  /* ---------- Motion ---------- */
  --ease-std: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---------- Layout ---------- */
  --max-w: 1280px;
  --gutter: 24px;
  --grid-cols: 12;
}

/* =============================================================
   Base + Semantic element styles
   ============================================================= */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-jp);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}

/* Semantic text roles */
.zw-display {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(var(--fs-56), 8vw, var(--fs-112));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.zw-h1 { font-family: var(--font-jp); font-weight: 700; font-size: var(--fs-40); line-height: var(--lh-snug); }
.zw-h2 { font-family: var(--font-jp); font-weight: 700; font-size: var(--fs-32); line-height: var(--lh-snug); }
.zw-h3 { font-family: var(--font-jp); font-weight: 500; font-size: var(--fs-24); line-height: var(--lh-snug); }
.zw-h4 { font-family: var(--font-jp); font-weight: 500; font-size: var(--fs-20); line-height: var(--lh-snug); }
.zw-body { font-family: var(--font-jp); font-size: var(--fs-16); line-height: var(--lh-loose); color: var(--fg-2); }
.zw-body-sm { font-family: var(--font-jp); font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--fg-3); }
.zw-caption { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--tracking-wide); color: var(--fg-3); text-transform: uppercase; }
.zw-label { font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing: var(--tracking-xwide); text-transform: uppercase; color: var(--fg-2); }
.zw-code { font-family: var(--font-mono); font-size: var(--fs-14); background: var(--bg-2); padding: 1px 6px; border: 1px solid var(--border); }
.zw-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Link convention */
.zw-link {
  color: var(--fg-1);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-std),
              text-decoration-thickness var(--dur-fast) var(--ease-std);
}
.zw-link:hover { color: var(--signal); text-decoration-thickness: 2px; }
.zw-link:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* Section number label convention — e.g. S01 / SERVICE */
.zw-section-label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--fg-3);
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
}
.zw-section-label::before {
  content: "";
  display: inline-block;
  width: 8px; height: 1px;
  background: var(--ink);
  margin-right: 6px;
}

/* Grid background utility */
.zw-bg-grid {
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.zw-bg-dots {
  background-image: radial-gradient(var(--grid-2) 1px, transparent 1px);
  background-size: 16px 16px;
}