/* Estudio — design tokens, the same family as the player's app (app/public/style.css) and the landing (site/):
   warm paper, a box of bright colours, ink outlines and hard «sticker» shadows, Fraunces for titles, Nunito for the
   interface and Caveat for small handwritten notes; a night of purple ink in dark mode.
   The values are copied from the app (the projects never load each other's files); the Estudio adds its
   semantic names (surface, ink, accent, ok/warn/crit/info) on top, tuned so every text pair passes WCAG AA in
   both themes. Loaded before style.css (index.html). */
:root {
  /* the app's palette */
  --coral: #ff6b5b; --sun: #ffc94a; --mint: #36cfa5; --violet: #7c5cff; --sky: #4cb3ff; --pink: #ff8fc7;
  --coral-soft: #ffe1dc; --sun-soft: #fff1c9; --mint-soft: #d5f7ec; --violet-soft: #ebe5ff; --sky-soft: #dbf0ff; --pink-soft: #ffe3f1;
  --edge: #2a1f3d;                 /* the sticker outline */
  --coral-ink: #d4392a;            /* coral as text (handwritten notes): AA as large text on paper */
  --on-color: #2a1f3d;             /* text on a bright colour (sun, mint, coral, sky): dark in both themes */
  --grain: rgba(60, 40, 20, .045); /* the paper's dotted grain */
  --pop-sm: 2px 2px 0 var(--edge); --pop: 3px 3px 0 var(--edge); --pop-big: 5px 5px 0 var(--edge);

  /* type */
  --font-display: 'Fraunces', Georgia, 'Iowan Old Style', serif;
  --font-ui: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand: 'Caveat', 'Comic Sans MS', cursive;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --display-axes: 'SOFT' 100, 'WONK' 1;

  /* the Estudio's names */
  --paper: #fdf6ea; --surface: #ffffff; --surface-2: #faf3e7;
  --ink: #2a1f3d; --ink-2: #4d4363; --ink-3: #6b6280;
  --rule: #e3d8ca; --rule-2: #efe6d9; --line: var(--rule);
  --field-edge: #8a809c;           /* fields: a calmer outline than the stickers (≥ 3:1 against the surface) */
  --accent: #6447e6; --accent-ink: #ffffff; --accent-soft: var(--violet-soft); --accent-2: #4a2fc4;
  --primary: #6447e6; --on-primary: #ffffff;   /* the raised primary button (violet, as the app's «Crear» when on) */
  --ok: #0b7a5b; --ok-soft: var(--mint-soft);
  --warn: #875800; --warn-soft: var(--sun-soft);
  --crit: #c0283a; --crit-soft: var(--coral-soft);
  --info: #1a649a; --info-soft: var(--sky-soft);
  --shadow: var(--pop-sm);
  --shadow-lg: var(--pop-big);
  --scrim: rgba(42, 31, 61, .45);
  --radius: 16px; --radius-sm: 10px; --radius-btn: 12px;
  color-scheme: light;
}
/* Dark: the app's night of purple ink (the system's choice, or the Estudio's moon button: data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --coral-soft: #4a2633; --sun-soft: #4a3d1e; --mint-soft: #173f37; --violet-soft: #2f2560; --sky-soft: #183a55; --pink-soft: #4a2241;
    --edge: #0a0614; --grain: rgba(255, 255, 255, .03); --coral-ink: #ff8f7f;
    --pop-sm: 2px 2px 0 #05030b; --pop: 3px 3px 0 #05030b; --pop-big: 5px 5px 0 #05030b;
    --paper: #17122a; --surface: #221a3a; --surface-2: #2c2350;
    --ink: #f8efe1; --ink-2: #ddd3ea; --ink-3: #b7accc;
    --rule: #3a2f5c; --rule-2: #2f2650; --field-edge: #7d6fa8;
    --accent: #a993ff; --accent-ink: #17122a; --accent-2: #d4c9ff;
    --ok: #5fe0b8; --warn: #ffd27a; --crit: #ff8f8a; --info: #8fcfff;
    --scrim: rgba(5, 3, 11, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --coral-soft: #4a2633; --sun-soft: #4a3d1e; --mint-soft: #173f37; --violet-soft: #2f2560; --sky-soft: #183a55; --pink-soft: #4a2241;
  --edge: #0a0614; --grain: rgba(255, 255, 255, .03); --coral-ink: #ff8f7f;
  --pop-sm: 2px 2px 0 #05030b; --pop: 3px 3px 0 #05030b; --pop-big: 5px 5px 0 #05030b;
  --paper: #17122a; --surface: #221a3a; --surface-2: #2c2350;
  --ink: #f8efe1; --ink-2: #ddd3ea; --ink-3: #b7accc;
  --rule: #3a2f5c; --rule-2: #2f2650; --field-edge: #7d6fa8;
  --accent: #a993ff; --accent-ink: #17122a; --accent-2: #d4c9ff;
  --ok: #5fe0b8; --warn: #ffd27a; --crit: #ff8f8a; --info: #8fcfff;
  --scrim: rgba(5, 3, 11, .6);
  color-scheme: dark;
}