/* En Armonía Studio — design tokens. See docs/brief.md §3 and design-log.md.
   Everything visual is named here; site.css only composes these. */

:root {
  /* Materials: paper, ink (indigo), terracotta highlight */
  --paper:      #f8f2e8;
  --paper-2:    #efe6d7;   /* slightly deeper paper for sheets/cards */
  --ink:        #23243a;   /* indigo-black, body text */
  --ink-2:      #2f3566;   /* indigo, headings & lines */
  --muted:      #7b7368;
  --accent:     #a0643c;   /* terracotta */
  --accent-2:   var(--accent); /* small-dose highlight (neon), set by data-accent */
  --lang-es:    #e9b62a;   /* Spanish: yellow */
  --lang-en:    #2f7fb3;   /* English: blue */
  --lang-zh:    #d23b2e;   /* Mandarin: red */
  --lang-ja:    #c9509a;   /* Japanese: pink */
  --line:       color-mix(in oklab, var(--ink-2) 22%, transparent);

  /* Areas (broad disciplines). Practices inherit their area's colour. */
  --area-music:  #3b4a8c;  /* indigo */
  --area-dance:  #b8452f;  /* terracotta-red */
  --area-visual: #2f7d6b;  /* jade */
  --area-design: #d99a2b;  /* mango */
  --area-mind:   #2f7fb3;  /* cerulean */

  /* Type. --font-display is switchable (see [data-font] below). */
  --font-display: "Gloock", Georgia, "Times New Roman", serif;   /* names */
  --font-title:   "IM Fell English", Georgia, serif;             /* wordmark + hero title */
  --font-text:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-cjk:     "Noto Serif SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", serif;

  --t-display: clamp(2.6rem, 9vw, 5rem);
  --t-h2:      clamp(1.6rem, 5vw, 2.4rem);
  --t-h3:      1.25rem;
  --t-body:    1.05rem;
  --t-small:   .9rem;
  --t-label:   .78rem;
  --track-label: .16em;
  --lh-body:   1.55;

  /* Space (4px grid) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --measure: 640px;
  --gutter: var(--s5);

  /* Shape */
  --r-chip: 999px;
  --r-sheet: 22px;
  --r-tile: 14px;

  /* Media library (R9) */
  --work-min: 260px;       /* narrowest card in the library grid */
  --cover-ratio: 16 / 9;   /* covers and video players */
  --r-cover: 6px;

  /* Motion: few durations, one ease, one stepped ease for the stop-motion feel */
  --d-fast: 160ms;
  --d-base: 320ms;
  --d-slow: 900ms;
  --d-drift: 9s;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-step: steps(10, end);
}

/* Names face (brief §3). Flip with data-font on <html>. */
:root[data-font="gloock"]     { --font-display: "Gloock", Georgia, serif; --t-display: clamp(2.4rem, 8.5vw, 4.4rem); }
:root[data-font="fraunces"]   { --font-display: "Fraunces", Georgia, serif; }
:root[data-font="instrument"] { --font-display: "Instrument Serif", Georgia, serif; --t-display: clamp(3rem, 10vw, 5.6rem); }

/* Title face (wordmark + hero). Flip with data-title. */
:root[data-title="imfell"]    { --font-title: "IM Fell English", Georgia, serif; }
:root[data-title="gloock"]    { --font-title: "Gloock", Georgia, serif; }
:root[data-title="fraunces"]  { --font-title: "Fraunces", Georgia, serif; }

/* Small-dose highlight colour (R3: "thin neon highlights to lift the mood"). Used only for outlines,
   the thread, active states and the hero rule; never for text. */
:root[data-accent="aqua"]    { --accent-2: #17e3c4; }
:root[data-accent="magenta"] { --accent-2: #ff3fa6; }
:root[data-accent="mango"]   { --accent-2: #ffb020; }

/* Reduced motion: durations collapse to zero; site.css and site.js also check. */
@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 0ms; --d-base: 0ms; --d-slow: 0ms; --d-drift: 0s; }
}

/* Dark mode is reserved (brief §3): tokens exist so a dark set can be added here later. */