/* ═══════════════════════════════════════════════════════════════════════════
   Silver Sun Republic — Design Tokens
   Single source of truth. Loaded by ArgentoWebApp and ArgentoMAUIApp via
   /_content/Shared.UI/css/ssr-tokens.css — never duplicate this file.

   Aesthetic: Roman republic — hammered gold on warm stone and deep ink.
   Dark is the primary theme; light is a warm parchment, never clinical white.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Brand constants (theme-independent) ─────────────────────────────────── */
:root {
    /* Gold — the republic's metal */
    --ssr-gold:            #c9a840;
    --ssr-gold-light:      #e6d18a;
    --ssr-gold-bright:     #f0dfa8;
    --ssr-gold-dark:       #8a6f26;
    --ssr-gold-deep:       #5c4917;

    /* Secondary metals + accents */
    --ssr-silver:          #c3c7cc;
    --ssr-terracotta:      #b85c38;
    --ssr-verdigris:       #4a7c6f;
    --ssr-blood:           #8c2f2f;
    --ssr-discord:         #5865f2;
    --ssr-discord-hover:   #4752c4;

    /* Ink — the deep end of the range, used by heroes in BOTH themes.
       Near-neutral graphite with a faint cool cast. An earlier warm-brown ink
       made every surface read as sepia and left no room for the silver half of
       "Silver Sun" — gold works as an accent, not as the whole room. */
    --ssr-ink-900:         #0a0c0f;
    --ssr-ink-800:         #101318;
    --ssr-ink-700:         #171b21;
    --ssr-ink-600:         #1e232a;
    --ssr-ink-500:         #272d36;

    /* Stone — the light end. Cool off-white, not cream. */
    --ssr-stone-50:        #ffffff;
    --ssr-stone-100:       #f5f6f8;
    --ssr-stone-200:       #eceef2;
    --ssr-stone-300:       #dfe2e8;
    --ssr-stone-400:       #c6cbd4;

    /* Semantic status */
    --ssr-success:         #4f8f5f;
    --ssr-warning:         #c88a2e;
    --ssr-danger:          #b4443c;
    --ssr-info:            #4a7c9c;

    /* ── Typography ─────────────────────────────────────────────────────── */
    --ssr-font-display:    'Cinzel', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    --ssr-font-body:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ssr-font-prose:      'Spectral', 'Palatino Linotype', Georgia, serif;
    --ssr-font-mono:       ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

    /* Type scale — 1.25 minor third, fluid at the display end */
    --ssr-text-2xs:        0.6875rem;   /* 11px — eyebrow, meta */
    --ssr-text-xs:         0.75rem;     /* 12px — labels, badges */
    --ssr-text-sm:         0.8125rem;   /* 13px — dense UI, table cells */
    --ssr-text-base:       0.9375rem;   /* 15px — body */
    --ssr-text-md:         1.0625rem;   /* 17px — lead paragraphs */
    --ssr-text-lg:         1.3125rem;   /* 21px — card titles */
    --ssr-text-xl:         1.625rem;    /* 26px — section headings */
    --ssr-text-2xl:        2.0625rem;   /* 33px — page titles */
    --ssr-text-display:    clamp(2rem, 5.5vw, 3.5rem);

    /* Tracking — Cinzel needs air, Inter does not */
    --ssr-track-display:   0.06em;
    --ssr-track-eyebrow:   0.16em;

    /* ── Spacing — 4px base ─────────────────────────────────────────────── */
    --ssr-space-1:         0.25rem;
    --ssr-space-2:         0.5rem;
    --ssr-space-3:         0.75rem;
    --ssr-space-4:         1rem;
    --ssr-space-5:         1.5rem;
    --ssr-space-6:         2rem;
    --ssr-space-7:         3rem;
    --ssr-space-8:         4rem;
    --ssr-space-9:         6rem;

    /* ── Radii ──────────────────────────────────────────────────────────── */
    --ssr-radius-sm:       4px;
    --ssr-radius:          8px;
    --ssr-radius-lg:       12px;
    --ssr-radius-xl:       18px;
    --ssr-radius-pill:     999px;

    /* ── Layout ─────────────────────────────────────────────────────────── */
    --ssr-measure:         68ch;   /* readable prose width */
    --ssr-container:       1140px;
    --ssr-container-wide:  1440px;
    --ssr-sidebar-w:       248px;
    --ssr-sidebar-w-collapsed: 68px;
    --ssr-header-h:        60px;

    /* ── Motion ─────────────────────────────────────────────────────────── */
    --ssr-ease:            cubic-bezier(0.4, 0, 0.2, 1);
    --ssr-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
    --ssr-dur-fast:        120ms;
    --ssr-dur:             200ms;
    --ssr-dur-slow:        360ms;

    --ssr-z-header:        1020;
    --ssr-z-drawer:        1045;
    --ssr-z-toast:         1090;

    /* Hero gradient — identical in both themes; heroes are always dark */
    --ssr-hero-bg: linear-gradient(160deg, #0a0c0f 0%, #151a22 42%, #10141a 72%, #07090b 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME — warm parchment, not white
   ═══════════════════════════════════════════════════════════════════════════ */
:root,
[data-bs-theme="light"] {
    --ssr-bg:              var(--ssr-stone-100);
    --ssr-bg-sunken:       var(--ssr-stone-200);
    --ssr-surface:         var(--ssr-stone-50);
    --ssr-surface-raised:  #ffffff;
    --ssr-surface-overlay: #ffffff;

    --ssr-text:            #14181d;
    --ssr-text-secondary:  #4a515b;
    --ssr-text-muted:      #767d88;
    --ssr-text-inverse:    var(--ssr-stone-100);

    /* The swatch gold fails contrast on parchment — this is the readable one */
    --ssr-gold-text:       #7a6120;
    --ssr-gold-on-surface: #8a6f26;

    --ssr-border:          rgba(20, 26, 36, 0.12);
    --ssr-border-strong:   rgba(20, 26, 36, 0.22);
    --ssr-border-gold:     rgba(201, 168, 64, 0.45);

    --ssr-shadow-sm:       0 1px 2px rgba(16, 22, 32, 0.06);
    --ssr-shadow:          0 2px 8px rgba(16, 22, 32, 0.07), 0 1px 2px rgba(16, 22, 32, 0.05);
    --ssr-shadow-lg:       0 12px 32px rgba(16, 22, 32, 0.13), 0 2px 6px rgba(16, 22, 32, 0.07);
    --ssr-shadow-gold:     0 4px 20px rgba(201, 168, 64, 0.22);

    /* Neutral tint for structure (panel heads, striping); gold tint is reserved
       for elements that are deliberately gold. */
    --ssr-tint:            rgba(20, 26, 36, 0.04);
    --ssr-tint-hover:      rgba(20, 26, 36, 0.07);
    --ssr-tint-gold:       rgba(201, 168, 64, 0.09);
    --ssr-tint-gold-hover: rgba(201, 168, 64, 0.16);
    --ssr-scrim:           rgba(10, 14, 20, 0.45);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME — the primary. Deep ink, gold light enough to read.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] {
    --ssr-bg:              var(--ssr-ink-800);
    --ssr-bg-sunken:       var(--ssr-ink-900);
    --ssr-surface:         var(--ssr-ink-700);
    --ssr-surface-raised:  var(--ssr-ink-600);
    --ssr-surface-overlay: var(--ssr-ink-600);

    --ssr-text:            #e7eaee;
    --ssr-text-secondary:  #a6adb8;
    --ssr-text-muted:      #79818d;
    --ssr-text-inverse:    var(--ssr-ink-900);

    --ssr-gold-text:       var(--ssr-gold-light);
    --ssr-gold-on-surface: var(--ssr-gold);

    /* Neutral hairlines. Gold-tinted borders on every surface were a large part
       of the sepia cast; gold now marks accents only. */
    --ssr-border:          rgba(255, 255, 255, 0.10);
    --ssr-border-strong:   rgba(255, 255, 255, 0.18);
    --ssr-border-gold:     rgba(201, 168, 64, 0.42);

    --ssr-shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.4);
    --ssr-shadow:          0 2px 10px rgba(0, 0, 0, 0.42), 0 1px 2px rgba(0, 0, 0, 0.3);
    --ssr-shadow-lg:       0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
    --ssr-shadow-gold:     0 4px 24px rgba(201, 168, 64, 0.18);

    --ssr-tint:            rgba(255, 255, 255, 0.04);
    --ssr-tint-hover:      rgba(255, 255, 255, 0.07);
    --ssr-tint-gold:       rgba(201, 168, 64, 0.08);
    --ssr-tint-gold-hover: rgba(201, 168, 64, 0.15);
    --ssr-scrim:           rgba(0, 0, 0, 0.68);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOOTSTRAP BRIDGE
   Map our tokens onto Bootstrap's variables so every stock component —
   .btn, .card, .table, .form-control, .modal, .dropdown — inherits the brand
   without touching the ~40 pages that use them.
   ═══════════════════════════════════════════════════════════════════════════ */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-bg:                  var(--ssr-bg);
    --bs-body-color:               var(--ssr-text);
    --bs-body-font-family:         var(--ssr-font-body);
    --bs-body-font-size:           var(--ssr-text-base);
    --bs-body-line-height:         1.6;

    --bs-emphasis-color:           var(--ssr-text);
    --bs-secondary-color:          var(--ssr-text-secondary);
    --bs-tertiary-color:           var(--ssr-text-muted);
    --bs-heading-color:            var(--ssr-text);

    --bs-secondary-bg:             var(--ssr-surface);
    --bs-tertiary-bg:              var(--ssr-bg-sunken);

    --bs-border-color:             var(--ssr-border);
    --bs-border-color-translucent: var(--ssr-border);
    --bs-border-radius:            var(--ssr-radius);
    --bs-border-radius-sm:         var(--ssr-radius-sm);
    --bs-border-radius-lg:         var(--ssr-radius-lg);

    --bs-primary:                  var(--ssr-gold-dark);
    --bs-primary-rgb:              138, 111, 38;
    --bs-link-color:               var(--ssr-gold-text);
    --bs-link-hover-color:         var(--ssr-gold);
    --bs-link-color-rgb:           201, 168, 64;

    --bs-success:                  var(--ssr-success);
    --bs-warning:                  var(--ssr-warning);
    --bs-danger:                   var(--ssr-danger);
    --bs-info:                     var(--ssr-info);

    --bs-card-bg:                  var(--ssr-surface);
    --bs-card-border-color:        var(--ssr-border);
    --bs-card-cap-bg:              var(--ssr-tint-gold);

    --bs-focus-ring-color:         rgba(201, 168, 64, 0.32);
    --bs-focus-ring-width:         3px;
}