/* Cylin brand tokens. Source of truth: Cylin/packages/brand/src/tokens.css. Each app keeps an identical copy
   (run `npm run sync` in packages/brand); edit it here.

   Only custom properties and font faces live here, all prefixed --cy-, so importing this file never
   changes an app's own styles. Apps map their own variables onto these.

   Theme: semantic tokens (--cy-bg, --cy-fg, ...) are light by default. Put data-cy-theme="dark" on any
   element for dark, or data-cy-theme="auto" on <html> to follow the device. Brand colours never flip. */

/* ---------------------------------------------------------------- fonts (SIL OFL 1.1, see fonts/) */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(./fonts/lexend-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(./fonts/lexend-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(./fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(./fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: italic; font-weight: 200 800; font-display: swap; src: url(./fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: italic; font-weight: 200 800; font-display: swap; src: url(./fonts/atkinson-hyperlegible-next-latin-ext-wght-italic.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Digits in Lexend, words in Atkinson: Atkinson Hyperlegible Next only has a slashed zero, which young
   readers misread. Listed first in --cy-font-text, it covers 0-9 only. */
@font-face { font-family: 'Cylin Digits'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(./fonts/lexend-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0030-0039; }

:root {
  /* ---------------------------------------------------------------- core */
  --cy-ink: #15142b;
  --cy-ink-2: #45435e;
  --cy-ink-3: #6b6880;
  --cy-paper: #ffffff;
  --cy-mist: #f6f6f9;
  --cy-mist-2: #eeedf3;
  --cy-line: #e3e2ea;
  --cy-line-2: #cfcdda;
  --cy-spark: #ffc53d;
  --cy-spark-ink: #7a5000; /* spark-family text on light surfaces */
  --cy-spark-tint: #fff4d6;

  /* ---------------------------------------------------------------- subjects: deep (tiles, buttons, text on white), bright (large shapes), tint (grounds), ink (text on tint) */
  --cy-vocab: #1d64c9;
  --cy-vocab-bright: #3d86f5;
  --cy-vocab-tint: #e9f1fd;
  --cy-vocab-ink: #0e3a7a;
  --cy-mult: #c2470f;
  --cy-mult-bright: #f26a2a;
  --cy-mult-tint: #fdeee5;
  --cy-mult-ink: #7a2a06;
  --cy-piano: #8a3fd1;
  --cy-piano-bright: #a866f2;
  --cy-piano-tint: #f4ecfd;
  --cy-piano-ink: #4e1d86;

  /* ---------------------------------------------------------------- status (never an app hue) */
  --cy-ok: #1e7a4f;
  --cy-ok-tint: #e3f3ea;
  --cy-warn: #8a5a00;
  --cy-warn-tint: #fff2d1;
  --cy-bad: #b3372e;
  --cy-bad-tint: #fce8e6;

  /* ---------------------------------------------------------------- avatars: the hub's avatar index 0-7, the same colour for a child in every app (white text passes 4.5:1) */
  --cy-av-0: #5b4bd6;
  --cy-av-1: #0e7c74;
  --cy-av-2: #c24e26;
  --cy-av-3: #2b7f39;
  --cy-av-4: #9a6a00;
  --cy-av-5: #2667c9;
  --cy-av-6: #c23d7b;
  --cy-av-7: #7b4fb0;

  /* ---------------------------------------------------------------- type */
  --cy-font-display: 'Lexend', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --cy-font-text: 'Cylin Digits', 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  --cy-t-12: 0.75rem;
  --cy-t-14: 0.875rem;
  --cy-t-16: 1rem;
  --cy-t-18: 1.125rem;
  --cy-t-20: 1.25rem;
  --cy-t-24: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --cy-t-32: clamp(1.6rem, 1.3rem + 1.2vw, 2rem);
  --cy-t-44: clamp(2rem, 1.5rem + 2.2vw, 2.75rem);
  --cy-t-64: clamp(2.6rem, 1.6rem + 4.4vw, 4rem);
  --cy-t-88: clamp(3rem, 1.6rem + 6.4vw, 5.5rem);

  /* ---------------------------------------------------------------- space, radius, elevation */
  --cy-s-1: 4px; --cy-s-2: 8px; --cy-s-3: 12px; --cy-s-4: 16px; --cy-s-5: 20px; --cy-s-6: 24px;
  --cy-s-8: 32px; --cy-s-10: 40px; --cy-s-12: 48px; --cy-s-16: 64px; --cy-s-20: 80px; --cy-s-24: 96px;
  --cy-r-chip: 8px;
  --cy-r-control: 12px;
  --cy-r-card: 18px;
  --cy-r-panel: 28px;
  --cy-r-tile: 22.5%; /* app icons: matches the continuous-corner tile, so clipping and shadows never cut it */
  --cy-e-1: 0 1px 2px rgb(21 20 43 / 0.06), 0 1px 1px rgb(21 20 43 / 0.04);
  --cy-e-2: 0 1px 2px rgb(21 20 43 / 0.06), 0 18px 40px -16px rgb(21 20 43 / 0.28);
  --cy-gutter: clamp(16px, 4vw, 40px);
  --cy-wrap: 1200px;

  /* ---------------------------------------------------------------- motion: lines draw, dots click */
  --cy-ease-draw: cubic-bezier(0.65, 0, 0.35, 1);
  --cy-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --cy-ease-click: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cy-d-1: 120ms; --cy-d-2: 220ms; --cy-d-3: 420ms; --cy-d-4: 700ms;

  /* ---------------------------------------------------------------- semantic (light) */
  --cy-bg: var(--cy-paper);
  --cy-bg-2: var(--cy-mist);
  --cy-bg-3: var(--cy-mist-2);
  --cy-surface: var(--cy-paper);
  --cy-fg: var(--cy-ink);
  --cy-fg-2: var(--cy-ink-2);
  --cy-fg-3: var(--cy-ink-3);
  --cy-border: var(--cy-line);
  --cy-border-2: var(--cy-line-2);
  --cy-scrim: rgb(21 20 43 / 0.38);
  --cy-focus-ring: 0 0 0 3px var(--cy-surface), 0 0 0 6px var(--cy-fg);
}

/* ---------------------------------------------------------------- semantic (dark) */
[data-cy-theme='dark'] {
  --cy-bg: #121124;
  --cy-bg-2: #1a1930;
  --cy-bg-3: #23223b;
  --cy-surface: #1a1930;
  --cy-fg: #f4f3f8;
  --cy-fg-2: #c9c7d9;
  --cy-fg-3: #9c9ab2;
  --cy-border: #2e2d48;
  --cy-border-2: #403f5e;
  --cy-spark-ink: #ffd97a;
  --cy-spark-tint: #3a2f12;
  --cy-vocab-tint: #16264a; --cy-vocab-ink: #bcd3ff; --cy-vocab-bright: #6aa3ff;
  --cy-mult-tint: #3a1d10; --cy-mult-ink: #ffc6a6; --cy-mult-bright: #ff8a50;
  --cy-piano-tint: #2a1a45; --cy-piano-ink: #dcc6ff; --cy-piano-bright: #c08cff;
  --cy-ok-tint: #12321f; --cy-warn-tint: #3a3217; --cy-bad-tint: #3d2220;
  --cy-e-2: 0 1px 2px rgb(0 0 0 / 0.4), 0 18px 40px -16px rgb(0 0 0 / 0.7);
  --cy-scrim: rgb(0 0 0 / 0.55);
}
@media (prefers-color-scheme: dark) {
  :root[data-cy-theme='auto'] {
    --cy-bg: #121124;
    --cy-bg-2: #1a1930;
    --cy-bg-3: #23223b;
    --cy-surface: #1a1930;
    --cy-fg: #f4f3f8;
    --cy-fg-2: #c9c7d9;
    --cy-fg-3: #9c9ab2;
    --cy-border: #2e2d48;
    --cy-border-2: #403f5e;
    --cy-spark-ink: #ffd97a;
    --cy-spark-tint: #3a2f12;
    --cy-vocab-tint: #16264a; --cy-vocab-ink: #bcd3ff; --cy-vocab-bright: #6aa3ff;
    --cy-mult-tint: #3a1d10; --cy-mult-ink: #ffc6a6; --cy-mult-bright: #ff8a50;
    --cy-piano-tint: #2a1a45; --cy-piano-ink: #dcc6ff; --cy-piano-bright: #c08cff;
    --cy-ok-tint: #12321f; --cy-warn-tint: #3a3217; --cy-bad-tint: #3d2220;
    --cy-e-2: 0 1px 2px rgb(0 0 0 / 0.4), 0 18px 40px -16px rgb(0 0 0 / 0.7);
    --cy-scrim: rgb(0 0 0 / 0.55);
  }
}