/* 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. */

/* The neon accent is a registered colour so the browser can blend it while it rotates (see the end of this file). */
@property --accent-2 { syntax: "<color>"; inherits: true; initial-value: #17e3c4; }

: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 */
  --name-ink:   #1c1a18;   /* the A's charcoal; the name wears it too (R18) */
  --muted:      #7b7368;
  --accent:     #a0643c;   /* terracotta */
  --accent-2:   #17e3c4;   /* neon, small doses only: rotates aqua → magenta → mango (R10, end of this file) */
  --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 (fixed in R10) */
  --font-display: "Gloock", Georgia, "Times New Roman", serif;   /* people's names, the hero line */
  --font-title:   "IM Fell English", Georgia, serif;             /* the company name: hero title, "Studio" in the lockup */
  --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.4rem, 8.5vw, 4.4rem);
  --t-logo:    clamp(2.7rem, 13vw, 5.6rem);   /* the full logo in the hero (R22) */
  --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;

  /* Secondary text that has to pass AA on paper (labels and meta lines on the media and brand pages) */
  --text-quiet: #665e53;
  /* Paper 001: the lighter paper of pieces, playbills and tags */
  --paper-light: color-mix(in oklab, var(--paper) 80%, white);

  /* The theater: the dark ground of the media page's theater (R16). Text on it is paper. */
  --theater:     #1d1f33;
  --theater-deep:  #0f1018;  /* the ground behind a platform's player */
  --theater-ink:   #f8f2e8;
  --theater-quiet: color-mix(in oklab, #f8f2e8 76%, transparent);
  --theater-line:  color-mix(in oklab, #f8f2e8 32%, transparent);

  /* Media (R9, R16) */
  --cover-ratio: 16 / 9;   /* playbills and video players */
  --r-cover: 6px;
  --knot: 44px;            /* a play button sitting on the thread: also the tap target */
  --thread-x: 38px;        /* where the thread runs, from the list's left edge */

  /* 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;
  --d-accent: 36s;         /* one full turn of the neon accent */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-step: steps(10, end);
}

/* The neon accent: one slow, simple turn through aqua → magenta → mango and back (R10). The in-between stops are
   spaced every ~30° of hue in OKLCH, so the colour stays as bright between the three as at them instead of going
   grey. Stepped timing repaints a few times a second rather than every frame. */
@keyframes accent-turn {
  0%     { --accent-2: #17e3c4; }   /* aqua */
  8.33%  { --accent-2: #20cdf9; }
  16.67% { --accent-2: #88acfe; }
  25%    { --accent-2: #c77cfd; }
  33.33% { --accent-2: #ff3fa6; }   /* magenta */
  41.67% { --accent-2: #ff6a81; }
  50%    { --accent-2: #fe866a; }
  58.33% { --accent-2: #fd9c56; }
  66.67% { --accent-2: #ffb020; }   /* mango */
  75%    { --accent-2: #dac427; }
  83.33% { --accent-2: #a9d55c; }
  91.67% { --accent-2: #6de092; }
  100%   { --accent-2: #17e3c4; }
}
:root { animation: accent-turn var(--d-accent) steps(16) infinite; }

/* 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; animation: none; }   /* the accent stays aqua */
}

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