/* =====================================================================
   Forsaken Lands — Design Tokens
   Linear-shell redesign · Kanso palette. Source of truth for design
   values. Ported verbatim from the mockup-redesign-linear-* spec.
   Theming is driven by the data-scheme attribute (kanso-zen default).
   ===================================================================== */

/* ============ KANSO ZEN — dark, default ============ */
:root,
[data-scheme="kanso-zen"] {
    --bg-body:        #090E13;
    --bg-panel:       #14171D;
    --bg-secondary:   #0E1318;
    --bg-hover:       #1B2027;
    --bg-active:      #22262D;
    --border:         #22262D;
    --border-hover:   #393B44;
    --text:           #A8ACAA;
    --text-bright:    #C5C9C7;
    --text-dim:       #75797F;
    --text-fade:      #5C6066;
    --highlight:      #B0C8D4;
    --highlight-hover:#C5D8E0;
    --highlight-rgb:  176, 200, 212;
    --accent-muted:   rgba(var(--highlight-rgb), 0.10);
    --accent:         #87A987;
    --accent-hover:   #98BA98;
    --accent-rgb:     135, 169, 135;
    --error:          #C4746E;
    --error-rgb:      196, 116, 110;
    --link:           #B0C8D4;
    --link-hover:     #C5D8E0;
    --warn:           #c4b28a;
    --warn-rgb:       196, 178, 138;
}

/* ============ KANSO INK — dark, softer ============ */
[data-scheme="kanso-ink"] {
    --bg-body:        #14171D;
    --bg-panel:       #1B1F26;
    --bg-secondary:   #181C23;
    --bg-hover:       #22262D;
    --bg-active:      #2A2E36;
    --border:         #22262D;
    --border-hover:   #393B44;
    --text:           #A8ACAA;
    --text-bright:    #C5C9C7;
    --text-dim:       #75797F;
    --text-fade:      #5C6066;
    --highlight:      #B0C8D4;
    --highlight-hover:#C5D8E0;
    --highlight-rgb:  176, 200, 212;
    --accent-muted:   rgba(var(--highlight-rgb), 0.10);
    --accent:         #87A987;
    --accent-hover:   #98BA98;
    --accent-rgb:     135, 169, 135;
    --error:          #C4746E;
    --error-rgb:      196, 116, 110;
    --link:           #B0C8D4;
    --link-hover:     #C5D8E0;
    --warn:           #c4b28a;
    --warn-rgb:       196, 178, 138;
}

/* ============ KANSO PEARL — light ============ */
[data-scheme="kanso-pearl"] {
    --bg-body:        #F2F1EF;
    --bg-panel:       #FBFAF8;
    --bg-secondary:   #E8E7E3;
    --bg-hover:       #DDDDDB;
    --bg-active:      #D3D3D0;
    --border:         rgba(34, 38, 45, 0.12);
    --border-hover:   rgba(34, 38, 45, 0.22);
    --text:           #3D4148;
    --text-bright:    #22262D;
    --text-dim:       #6D6D69;
    --text-fade:      #9A9A95;
    --highlight:      #4C82B5;
    --highlight-hover:#3870A8;
    --highlight-rgb:  76, 130, 181;
    --accent-muted:   rgba(var(--highlight-rgb), 0.10);
    --accent:         #6E915F;
    --accent-hover:   #5A7D4D;
    --accent-rgb:     110, 145, 95;
    --error:          #D7474B;
    --error-rgb:      215, 71, 75;
    --link:           #4C82B5;
    --link-hover:     #3870A8;
    --warn:           #77713f;
    --warn-rgb:       119, 113, 63;
}

/* ============ DUSK — dark, twilight indigo/violet ============ */
[data-scheme="dusk"] {
    --bg-body:        #0F0D17;
    --bg-panel:       #1A1726;
    --bg-secondary:   #15121F;
    --bg-hover:       #221E30;
    --bg-active:      #2C2740;
    --border:         #2C2740;
    --border-hover:   #423A56;
    --text:           #ABA5BA;
    --text-bright:    #CCC7D8;
    --text-dim:       #7C7790;
    --text-fade:      #605B72;
    --highlight:      #C4B0E5;
    --highlight-hover:#D6C5F0;
    --highlight-rgb:  196, 176, 229;
    --accent-muted:   rgba(var(--highlight-rgb), 0.12);
    --accent:         #8BAAA0;
    --accent-hover:   #9CBBB1;
    --accent-rgb:     139, 170, 160;
    --error:          #C87E92;
    --error-rgb:      200, 126, 146;
    --link:           #C4B0E5;
    --link-hover:     #D6C5F0;
    --warn:           #c0a98c;
    --warn-rgb:       192, 169, 140;
}

/* ============ EMBER — dark, warm coal/amber ============ */
[data-scheme="ember"] {
    --bg-body:        #120E0B;
    --bg-panel:       #1F1813;
    --bg-secondary:   #181210;
    --bg-hover:       #281F17;
    --bg-active:      #34281B;
    --border:         #34281B;
    --border-hover:   #4C3927;
    --text:           #B6ABA0;
    --text-bright:    #D6CABB;
    --text-dim:       #847869;
    --text-fade:      #675D50;
    --highlight:      #E5A472;
    --highlight-hover:#F0B888;
    --highlight-rgb:  229, 164, 114;
    --accent-muted:   rgba(var(--highlight-rgb), 0.12);
    --accent:         #93A86A;
    --accent-hover:   #A4B97B;
    --accent-rgb:     147, 168, 106;
    --error:          #CD6B53;
    --error-rgb:      205, 107, 83;
    --link:           #E5A472;
    --link-hover:     #F0B888;
    --warn:           #c8af6b;
    --warn-rgb:       200, 175, 107;
}

/* ============ FROST — dark, cold icy blue ============ */
[data-scheme="frost"] {
    --bg-body:        #0A0F13;
    --bg-panel:       #141A20;
    --bg-secondary:   #0F151A;
    --bg-hover:       #1B232A;
    --bg-active:      #232D35;
    --border:         #232D35;
    --border-hover:   #37454F;
    --text:           #A4AEB4;
    --text-bright:    #C7D1D7;
    --text-dim:       #717C84;
    --text-fade:      #586169;
    --highlight:      #A4D0E0;
    --highlight-hover:#BCDEEC;
    --highlight-rgb:  164, 208, 224;
    --accent-muted:   rgba(var(--highlight-rgb), 0.12);
    --accent:         #84AFA6;
    --accent-hover:   #96C0B7;
    --accent-rgb:     132, 175, 166;
    --error:          #C77E84;
    --error-rgb:      199, 126, 132;
    --link:           #A4D0E0;
    --link-hover:     #BCDEEC;
    --warn:           #b3b291;
    --warn-rgb:       179, 178, 145;
}

/* ============ VERDANT — dark, lush forest green ============ */
[data-scheme="verdant"] {
    --bg-body:        #0A0F0B;
    --bg-panel:       #141A14;
    --bg-secondary:   #0F150F;
    --bg-hover:       #1B231B;
    --bg-active:      #232D23;
    --border:         #232D23;
    --border-hover:   #364636;
    --text:           #A6AFA4;
    --text-bright:    #C8D2C5;
    --text-dim:       #747C71;
    --text-fade:      #5A6157;
    --highlight:      #A4CC9F;
    --highlight-hover:#BCDCBA;
    --highlight-rgb:  164, 204, 159;
    --accent-muted:   rgba(var(--highlight-rgb), 0.12);
    --accent:         #B5A86A;
    --accent-hover:   #C6B97B;
    --accent-rgb:     181, 168, 106;
    --error:          #C47A6E;
    --error-rgb:      196, 122, 110;
    --link:           #A4CC9F;
    --link-hover:     #BCDCBA;
    --warn:           #bfb083;
    --warn-rgb:       191, 176, 131;
}

/* ============ Structural tokens (scheme-independent) ============ */
:root {
    /* Fonts — the mockups establish exactly these two */
    --font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

    /* Type scale — promoted from the mockup literals */
    --fs-hero:    88px;
    --fs-hero-sub:30px;
    --fs-display: 28px;
    --fs-h1:      24px;
    --fs-h2:      22px;
    --fs-lg:      20px;
    --fs-section: 18px;
    --fs-body:    15px;
    --fs-base:    14px;
    --fs-ui:      13px;
    --fs-sm:      12px;
    --fs-meta:    11px;
    --fs-micro:   10.5px;
    --fs-tiny:    10px;

    /* Line heights */
    --lh-tight:   1.15;
    --lh-heading: 1.2;
    --lh-snug:    1.35;
    --lh-base:    1.55;
    --lh-relaxed: 1.7;

    /* Weights */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-heavy:    800;

    /* Letter spacing */
    --ls-tight:  -.035em;
    --ls-snug:   -.018em;
    --ls-normal: -.005em;
    --ls-wide:   .04em;
    --ls-wider:  .08em;
    --ls-widest: .14em;

    /* Radii — promoted from mockup literals */
    --radius-xs: 3px;
    --radius-sm: 4px;
    --radius:    6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-pill: 999px;

    /* Spacing rhythm */
    --space-1:  4px;
    --space-2:  6px;
    --space-3:  9px;
    --space-4:  12px;
    --space-5:  14px;
    --space-6:  18px;
    --space-7:  22px;
    --space-8:  32px;
    --space-9:  56px;
    --space-10: 64px;

    /* Layout primitives */
    --sidebar-w:   240px;
    --content-max: 1280px;
    --border-width: 1px;

    /* Transitions */
    --t-fast: .1s;
    --t-base: .15s;
    --t-slow: .25s;

    /* Focus ring */
    --focus-ring: 0 0 0 3px var(--accent-muted);
}

/* =====================================================================
   Migration scaffold — legacy --color-* aliases.
   style.css still references the old token names. These aliases map them
   onto the Kanso system so page content stays readable while each page
   is ported slice by slice. Removed once style.css is fully retired.
   ===================================================================== */
:root {
    --color-bg-base:        var(--bg-body);
    --color-bg-elevated:    var(--bg-panel);
    --color-bg-secondary:   var(--bg-secondary);
    --color-bg-input:       var(--bg-body);
    --color-bg-hover:       var(--bg-hover);
    --color-bg-active:      var(--bg-active);
    --color-bg-code:        var(--bg-secondary);
    --color-bg-stripe:      var(--bg-secondary);
    --color-bg-nav:         var(--bg-body);
    --color-bg-header:      var(--bg-body);
    --color-bg-sidebar:     var(--bg-body);
    --color-text:           var(--text);
    --color-text-bright:    var(--text-bright);
    --color-text-dim:       var(--text-dim);
    --color-text-fade:      var(--text-fade);
    --color-text-inverse:   var(--bg-body);
    --color-border:         var(--border);
    --color-border-hover:   var(--border-hover);
    --color-border-focus:   var(--highlight);
    --color-link:           var(--link);
    --color-link-hover:     var(--link-hover);
    --color-accent-primary:       var(--highlight);
    --color-accent-primary-hover: var(--highlight-hover);
    --color-accent-primary-rgb:   var(--highlight-rgb);
    --color-success:        var(--accent);
    --color-success-hover:  var(--accent-hover);
    --color-success-muted:  var(--accent-muted);
    --color-success-rgb:    var(--accent-rgb);
    --color-role-good:      var(--accent);
    --color-role-good-rgb:  var(--accent-rgb);
    --color-error:          var(--error);
    --color-error-hover:    var(--error);
    --color-error-bg:       var(--accent-muted);
    --color-error-rgb:      var(--error-rgb);
    --color-warn:           var(--warn);
    --color-warn-rgb:       var(--warn-rgb);
    --color-info:           var(--highlight);
    --color-imm:            var(--highlight);
    --color-imm-rgb:        var(--highlight-rgb);
    --color-banned:         var(--error);
    --color-patron:         var(--accent);
    --color-role-brown:     var(--warn);
    --color-role-brown-rgb: var(--warn-rgb);
    --color-warm-white-rgb: 197, 201, 199;
    --font-display: var(--font-sans);
    --font-body:    var(--font-sans);
    --font-ui:      var(--font-sans);
    --font-script:  Georgia, serif;
}

/* legacy short-name aliases used by style.css component rules */
:root {
    --bg-input:     var(--bg-body);
    --bg-input-sm:  var(--bg-body);
    --bg-nav:       var(--bg-body);
    --bg-header:    var(--bg-body);
    --bg-sidebar:   var(--bg-body);
    --bg-code:      var(--bg-secondary);
    --border-focus: var(--highlight);
    --nav-sep:      var(--border);
    --nav-hover:    var(--bg-hover);
    --nav-active:   var(--bg-active);
    --success:      var(--accent);
    --success-hover:var(--accent-hover);
    --error-bg:     var(--accent-muted);
    --font-prose:   var(--font-sans);
    --warm-white-rgb: 197, 201, 199;
}

/* legacy named spacing + overlay — used by map.css */
:root {
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 14px;
    --space-lg: 20px;
    --space-xl: 28px;
    --color-overlay-base: rgba(9, 14, 19, 0.82);
}

/* legacy tokens used by play.css (in-browser MUD client) */
:root {
    --color-bg-tertiary:   var(--bg-active);
    --color-overlay-deep:  rgba(9, 14, 19, 0.92);
    --color-role-evil:     var(--error);
    --color-role-info:     var(--highlight);
    --color-role-warn:     var(--warn);
}