/*
 * Kyrell — Theme Variables
 * All theme customization lives here. Edit via Admin > Settings > Theme.
 * ─────────────────────────────────────────────────────────────────────────── */

:root {

    /* ── Background layers ───────────────────────────────────────────────── */
    --color-bg:              #0f0d09;      /* Page body */
    --color-surface:         #1a150e;      /* Sidebar, elevated panels */
    --color-surface-raised:  #221b12;      /* Cards, dropdowns */
    --color-surface-card:    #2a2015;      /* Entry cards */
    --color-surface-inset:   #120f08;      /* Input backgrounds, code blocks */

    /* ── Borders ─────────────────────────────────────────────────────────── */
    --color-border:          #3a2e1e;
    --color-border-subtle:   #261f13;
    --color-border-focus:    #d4af6a;

    /* ── Text ────────────────────────────────────────────────────────────── */
    --color-text-primary:    #e8dcc8;      /* Main body text */
    --color-text-secondary:  #b5a488;      /* Labels, captions */
    --color-text-muted:      #7a6a52;      /* Placeholder, disabled */
    --color-text-inverse:    #0f0d09;      /* Text on gold/bright backgrounds */

    /* ── Gold (primary accent) ───────────────────────────────────────────── */
    --color-gold:            #d4af6a;
    --color-gold-bright:     #e8c97e;
    --color-gold-dim:        #8b6f3a;
    --color-gold-muted:      #4a3820;      /* Subtle gold tints */

    /* ── Jewel-tone accents ──────────────────────────────────────────────── */
    --color-purple:          #6b3a82;      /* Magic, GM-only */
    --color-blue:            #2a5c8c;      /* Information, water */
    --color-red:             #8c3030;      /* Danger, fire, blood */
    --color-green:           #3a7a3a;      /* Nature, success, poison */
    --color-amber:           #8c6a20;      /* Warning */

    /* ── Semantic ─────────────────────────────────────────────────────────── */
    --color-success:         #3a7a3a;
    --color-success-bg:      #1a2e1a;
    --color-warning:         #8c6a20;
    --color-warning-bg:      #2a2010;
    --color-danger:          #8c3030;
    --color-danger-bg:       #2a1010;
    --color-info:            #2a5c8c;
    --color-info-bg:         #0f1e2e;

    /* ── GM-only content indicator ───────────────────────────────────────── */
    --color-gm-bg:           #1e0e2a;
    --color-gm-border:       #6b3a82;
    --color-gm-text:         #c08ae0;
    --color-gm-badge:        #8b3aab;

    /* ── Typography ──────────────────────────────────────────────────────── */
    --font-heading:  'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;
    --font-body:     'Crimson Text', 'Georgia', 'Times New Roman', serif;
    --font-ui:       'Open Sans', 'Segoe UI', system-ui, sans-serif;
    --font-mono:     'Courier New', 'Lucida Console', monospace;

    /* ── Font sizes ──────────────────────────────────────────────────────── */
    --text-xs:   0.75rem;    /*  12px */
    --text-sm:   0.875rem;   /*  14px */
    --text-base: 1rem;       /*  16px */
    --text-md:   1.125rem;   /*  18px */
    --text-lg:   1.25rem;    /*  20px */
    --text-xl:   1.5rem;     /*  24px */
    --text-2xl:  1.875rem;   /*  30px */
    --text-3xl:  2.25rem;    /*  36px */
    --text-4xl:  3rem;       /*  48px */
    --text-hero: 4.5rem;     /*  72px */

    /* ── Spacing ─────────────────────────────────────────────────────────── */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;

    /* ── Layout ──────────────────────────────────────────────────────────── */
    --sidebar-width:       280px;
    --header-height:       64px;
    --content-max-width:   1160px;

    /* ── Borders & Radii ─────────────────────────────────────────────────── */
    --radius-sm:   3px;
    --radius:      6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-full: 9999px;

    /* ── Shadows ─────────────────────────────────────────────────────────── */
    --shadow-xs:  0 1px 2px rgba(0,0,0,0.5);
    --shadow-sm:  0 2px 6px rgba(0,0,0,0.5);
    --shadow:     0 4px 14px rgba(0,0,0,0.6);
    --shadow-lg:  0 8px 28px rgba(0,0,0,0.7);
    --shadow-xl:  0 16px 48px rgba(0,0,0,0.8);
    --shadow-gold: 0 0 16px rgba(212,175,106,0.25);

    /* ── Transitions ─────────────────────────────────────────────────────── */
    --transition-fast:   0.15s ease;
    --transition:        0.25s ease;
    --transition-slow:   0.4s ease;

    /* ── Z-index layers ──────────────────────────────────────────────────── */
    --z-base:    1;
    --z-raised:  10;
    --z-overlay: 100;
    --z-sidebar: 200;
    --z-header:  300;
    --z-modal:   400;
    --z-toast:   500;
}