/* ============================================================
   assets/css/tokens.css, JVDesignStudio design tokens (A257)

   One place for colour, type, spacing and radius. Loaded site-wide
   by the @import at the top of style-shared.css.

   Every token starts with --jv- so it never collides with the page
   :root blocks (many of them already define --text, --surface,
   --accent...). Pages move onto these one hub at a time (A261).

   Themes
     data-theme="dark" on <html>   set by nav.js from jvds-theme
     data-character="stardust|lumo|ember|pip|echo" on any element
       gives that part of the page
         --jv-char       the character's colour (fills, borders)
         --jv-char-ink   the character's colour for text and icons
         --jv-char-soft  a light tint for panels and chips
         --jv-char-on    text on a solid --jv-char fill
   Character colours come from style-mascots.css (--mascot-*), which
   matches the mascot art. Stardust imagines, Lumo teaches, Ember
   creates, Pip plays, Echo improves.

   Check contrast after any colour change: node tests/tokens-contrast.js
   ============================================================ */

:root {
    /* Brand */
    --jv-beige:       #F0EAD6;
    --jv-tan:         #D2B48C;
    --jv-tan-dk:      #B8956A;
    --jv-rose:        #BC4749;
    --jv-rose-dk:     #9B3A3C;
    --jv-teal:        #70A3A7;
    --jv-teal-dk:     #4E7D80;
    --jv-charcoal:    #403B33;
    --jv-charcoal-lt: #5A5449;

    /* Night: the dark header, footer and game grounds, in both themes */
    --jv-night:       #0A0B10;
    --jv-night-2:     #1E1C18;
    --jv-on-night:    var(--jv-beige);

    /* Page (light theme) */
    --jv-bg:          var(--jv-beige);
    --jv-surface:     #FFFFFF;
    --jv-surface-2:   #F5F0E8;
    --jv-text:        var(--jv-charcoal);
    --jv-text-muted:  var(--jv-charcoal-lt);
    --jv-line:        rgba(64,59,51,0.12);
    --jv-link:        #3D6B6E;
    --jv-accent:      var(--jv-rose);
    --jv-accent-ink:  var(--jv-rose-dk);
    --jv-on-accent:   #FFFFFF;
    --jv-focus:       #4CC9C0;
    --jv-success:     #256B42;
    --jv-warn:        #8A5300;
    --jv-danger:      var(--jv-rose-dk);

    /* Characters */
    --jv-stardust:      #FFD23C;
    --jv-stardust-ink:  #7A5A00;
    --jv-stardust-soft: rgba(255,210,60,0.18);
    --jv-lumo:          #7C6CF0;
    --jv-lumo-ink:      #5443D1;
    --jv-lumo-soft:     rgba(124,108,240,0.14);
    --jv-ember:         #F2637A;
    --jv-ember-ink:     #AE2239;
    --jv-ember-soft:    rgba(242,99,122,0.14);
    --jv-pip:           #7AC74F;
    --jv-pip-ink:       #336A1B;
    --jv-pip-soft:      rgba(122,199,79,0.16);
    --jv-echo:          #2EB5A5;
    --jv-echo-ink:      #146B62;
    --jv-echo-soft:     rgba(46,181,165,0.14);

    /* No character chosen: the studio rose */
    --jv-char:       var(--jv-accent);
    --jv-char-ink:   var(--jv-accent-ink);
    --jv-char-soft:  rgba(188,71,73,0.12);
    --jv-char-on:    var(--jv-on-accent);

    /* Type */
    --jv-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --jv-font-display: 'Fredoka', var(--jv-font-body);
    --jv-font-mono:    ui-monospace, 'Cascadia Code', Consolas, monospace;
    --jv-text-xs:   0.75rem;
    --jv-text-sm:   0.875rem;
    --jv-text-base: 1rem;
    --jv-text-lg:   1.125rem;
    --jv-text-xl:   1.375rem;
    --jv-text-2xl:  clamp(1.6rem, 3.5vw, 2.4rem);
    --jv-text-3xl:  clamp(2.2rem, 5vw, 3.6rem);
    --jv-leading-tight: 1.15;
    --jv-leading-body:  1.6;

    /* Spacing (4px steps, then bigger jumps for sections) */
    --jv-space-1: 4px;
    --jv-space-2: 8px;
    --jv-space-3: 12px;
    --jv-space-4: 16px;
    --jv-space-5: 24px;
    --jv-space-6: 32px;
    --jv-space-7: 48px;
    --jv-space-8: 80px;

    /* Radius */
    --jv-radius-sm:   8px;
    --jv-radius-md:   14px;
    --jv-radius-lg:   20px;
    --jv-radius-pill: 999px;

    /* Depth */
    --jv-shadow-1: 0 4px 20px rgba(64,59,51,0.08);
    --jv-shadow-2: 0 14px 36px rgba(64,59,51,0.14);
    --jv-ease:     0.15s ease;
}

[data-theme="dark"] {
    --jv-bg:          #1A1814;
    --jv-surface:     #272320;
    --jv-surface-2:   #2E2A26;
    --jv-text:        #F0EAD6;
    --jv-text-muted:  rgba(240,234,214,0.72);
    --jv-line:        rgba(240,234,214,0.12);
    --jv-link:        #8CC7CB;
    --jv-accent-ink:  #E88486;
    --jv-success:     #6FD39A;
    --jv-warn:        #F0B35A;
    --jv-danger:      #E88486;

    --jv-stardust-ink: #FFD23C;
    --jv-lumo-ink:     #A89CF7;
    --jv-ember-ink:    #F7899A;
    --jv-pip-ink:      #95D86F;
    --jv-echo-ink:     #4FD1C1;
    --jv-char-soft:    rgba(188,71,73,0.18);

    --jv-shadow-1: 0 4px 20px rgba(0,0,0,0.30);
    --jv-shadow-2: 0 14px 36px rgba(0,0,0,0.50);
}

/* Character themes. Each colour is bright enough that dark text reads on a
   solid fill, so --jv-char-on is the night colour for all five. */
[data-character] { --jv-char-on: var(--jv-night); }
[data-character="stardust"] { --jv-char: var(--jv-stardust); --jv-char-ink: var(--jv-stardust-ink); --jv-char-soft: var(--jv-stardust-soft); }
[data-character="lumo"]     { --jv-char: var(--jv-lumo);     --jv-char-ink: var(--jv-lumo-ink);     --jv-char-soft: var(--jv-lumo-soft); }
[data-character="ember"]    { --jv-char: var(--jv-ember);    --jv-char-ink: var(--jv-ember-ink);    --jv-char-soft: var(--jv-ember-soft); }
[data-character="pip"]      { --jv-char: var(--jv-pip);      --jv-char-ink: var(--jv-pip-ink);      --jv-char-soft: var(--jv-pip-soft); }
[data-character="echo"]     { --jv-char: var(--jv-echo);     --jv-char-ink: var(--jv-echo-ink);     --jv-char-soft: var(--jv-echo-soft); }