/* Ismael Sarmiento design system — tokens shared by every site on isuniverse.dev
   (Inicio /, IsProfile /profile/, IsAcademy /academy/, which adds only its own console and opening colours).
   Change a value here and every page that links /assets/ds/tokens.css follows. */

@font-face { font-family: 'Allura'; src: url('fonts/allura-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('fonts/space-grotesk-latin.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }

:root {
  /* brand palette (same in both themes) */
  --ink-950: #0b1026; --ink-900: #0d1229; --ink-850: #121833; --ink-800: #1b2247; --ink-700: #1c2547; --ink-600: #2e3c74; --ink-500: #3a4170;
  --gold-700: #7a5212; --gold-600: #b58534; --gold-500: #c8953f; --gold-400: #e2b25c; --gold-300: #f2d18b;
  --cream-50: #fbf7ef; --cream-100: #f4ecdd; --cream-200: #f6f1e7;
  --mist-100: #e7e9f5; --mist-200: #c9cde3; --mist-300: #b9bdd3; --mist-500: #8d94b8; --mist-600: #6d7499;
  --on-gold: #1c1407;
  --mist-350: #b3b8d6;
  /* states: messages of forms (success, error) */
  --success: #9fe0b4; --success-strong: #5fbf7a;
  --danger: #e06c5a; --danger-strong: #d4553f; --danger-soft: #ffb4a3; --danger-border: #ff8a73;
  /* shape, type and motion */
  --radius: 18px; --radius-sm: 12px; --radius-lg: 28px;
  --font-script: 'Allura', 'Snell Roundhand', cursive;
  --font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  /* motion: one rhythm for every site (IsAcademy's timings are the reference) */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .2s;
  --dur-base: .45s;
  --dur-slow: .9s;
  --stagger: .08s;
  /* light theme: one brand gold (logo, buttons, script, numbers, borders) + one gold for small text */
  --gold: var(--gold-600); --gold-2: var(--gold-500); --gold-text: var(--gold-700);
  --bg: var(--cream-50); --bg-alt: var(--cream-100); --surface: #fffdf9;
  --text: var(--ink-700); --text-2: #4a5170; --line: rgba(28, 37, 71, .12);
  --control-border: var(--mist-600); --control-hover-border: var(--ink-700);
  --control-placeholder: var(--text-2); --success-text: #28623d; --danger-text: #9b3929;
  --glass: rgba(251, 247, 239, .82);
  --shadow: 0 18px 50px rgba(122, 82, 18, .08); --shadow-hover: 0 24px 60px rgba(122, 82, 18, .14);
  --shadow-sm: 0 6px 18px rgba(122, 82, 18, .10); --bar-shadow: 0 10px 30px rgba(122, 82, 18, .07);
  --spot: rgba(200, 149, 63, .10);
  --gold-glow: rgba(226, 178, 92, .18);
  /* assistant avatar skin (IsAcademy's Alan): warmer in light, softer in dark */
  --av-skin: #8d5b3d; --av-shade: #6e4229;
  color-scheme: light;
}
/* dark theme: the system preference unless the visitor chose light, or an explicit choice (both blocks stay identical) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--ink-950); --bg-alt: #10163a; --surface: #141b40; --text: var(--cream-200); --text-2: var(--mist-300); --line: rgba(255, 255, 255, .12);
    --glass: rgba(11, 16, 38, .78); --shadow: 0 18px 50px rgba(0, 0, 0, .4); --shadow-hover: 0 24px 60px rgba(0, 0, 0, .5); --spot: rgba(226, 178, 92, .08);
    --shadow-sm: 0 6px 18px rgba(0, 0, 0, .35); --bar-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    --control-border: var(--mist-500); --control-hover-border: var(--mist-200);
    --control-placeholder: var(--text-2); --success-text: var(--success); --danger-text: var(--danger-soft);
    --gold: var(--gold-500); --gold-2: var(--gold-400); --gold-text: var(--gold-400); --av-skin: #c08d68; --av-shade: #9b6a4a; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--ink-950); --bg-alt: #10163a; --surface: #141b40; --text: var(--cream-200); --text-2: var(--mist-300); --line: rgba(255, 255, 255, .12);
  --glass: rgba(11, 16, 38, .78); --shadow: 0 18px 50px rgba(0, 0, 0, .4); --shadow-hover: 0 24px 60px rgba(0, 0, 0, .5); --spot: rgba(226, 178, 92, .08);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, .35); --bar-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --control-border: var(--mist-500); --control-hover-border: var(--mist-200);
  --control-placeholder: var(--text-2); --success-text: var(--success); --danger-text: var(--danger-soft);
  --gold: var(--gold-500); --gold-2: var(--gold-400); --gold-text: var(--gold-400); --av-skin: #c08d68; --av-shade: #9b6a4a; color-scheme: dark;
}