/* ======================================================
   MERCHANTS ROAD — Global Design System (Day 36)
   ======================================================
   Every colour, shadow, font, and spacing token lives here.
   Component .razor.css files should reference these vars.
   ====================================================== */

/* =========================================
   1. FONTS (Google Fonts imported in index.html)
   ========================================= */
/* Cinzel — headers, titles, medieval branding
   Fauna One — body text, readable paragraphs
   Inter — UI elements, stats, monospace-like clarity */

/* =========================================
   2. DESIGN TOKENS — Change these to reskin the game
   ========================================= */
:root {
    /* --- Core Palette --- */
    --gold:              #f39c12;
    --gold-light:        #f1c40f;
    --gold-glow:         rgba(243, 156, 18, 0.3);
    --gold-dim:          rgba(243, 156, 18, 0.08);

    --wood-dark:         #3e2723;
    --wood-medium:       #5d4037;
    --wood-light:        #6a4f32;
    --wood-border:       #4a3728;
    --wood-subtle:       rgba(139, 94, 60, 0.2);

    --bg-deep:           #0d0907;
    --bg-dark:           #1a110a;
    --bg-panel:          rgba(20, 15, 10, 0.95);
    --bg-header:         rgba(40, 30, 20, 0.4);
    --bg-overlay:        rgba(0, 0, 0, 0.7);

    /* --- Text --- */
    --text-primary:      #e0d5c1;
    --text-secondary:    #b5a48d;
    --text-muted:        #8d7d6a;
    --text-dim:          #887a66;
    --text-bright:       #ecf0f1;

    /* --- Semantic Colours --- */
    --danger:            #e74c3c;
    --danger-dark:       #c0392b;
    --danger-glow:       rgba(231, 76, 60, 0.3);
    --success:           #2ecc71;
    --success-dark:      #27ae60;
    --success-glow:      rgba(46, 204, 113, 0.2);
    --warning:           #e67e22;
    --warning-glow:      rgba(230, 126, 34, 0.3);
    --info:              #3498db;
    --primary-red:       #8b0000;
    --primary-red-light: #a52a2a;

    /* --- Parchment (Home page / auth forms) --- */
    --parchment:         #F4E4BC;
    --parchment-bg:      #fdf5e6;
    --ink:               #2c1810;

    /* --- Typography --- */
    --font-title:        'Cinzel', serif;
    --font-body:         'Fauna One', serif;
    --font-ui:           'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:         'JetBrains Mono', 'Fira Code', monospace;

    /* --- Spacing --- */
    --space-xs:          4px;
    --space-sm:          8px;
    --space-md:          16px;
    --space-lg:          24px;
    --space-xl:          32px;
    --space-2xl:         48px;

    /* --- Border Radius --- */
    --radius-sm:         4px;
    --radius-md:         6px;
    --radius-lg:         8px;
    --radius-pill:       12px;
    --radius-round:      50%;

    /* --- Shadows --- */
    --shadow-panel:      0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-elevated:   0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-inset:      inset 0 0 20px rgba(0, 0, 0, 0.8);
    --shadow-glow-gold:  0 0 10px rgba(243, 156, 18, 0.5);
    --shadow-drop:       0 4px 10px rgba(0, 0, 0, 0.8);

    /* --- Z-Index Stack --- */
    --z-map:             1;
    --z-vignette:        2;
    --z-ui:              5;
    --z-panel:           10;
    --z-topbar:          100;
    --z-modal:           500;
    --z-overlay:         1000;
    --z-error:           9999;

    /* --- Transitions --- */
    --ease-smooth:       0.2s ease;
    --ease-bounce:       0.25s ease;
    --ease-slow:         0.5s ease;

    /* --- Panel Dimensions --- */
    --panel-width:       520px;
    --panel-height:      980px;
    --topbar-height:     80px;
    --modal-width:       550px;
}

/* =========================================
   3. CSS RESET & BASE STYLES
   ========================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--bg-deep);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.5;
    min-height: 100vh;
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gold);
    line-height: 1.2;
}

a {
    color: var(--gold);
    text-decoration: none;
    transition: color var(--ease-smooth);
}

a:hover {
    color: var(--gold-light);
}

/* =========================================
   4. SCROLLBAR THEME
   ========================================= */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
    background: var(--wood-light);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--wood-medium);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--wood-light) rgba(0, 0, 0, 0.2);
}

/* =========================================
   5. UTILITY CLASSES
   ========================================= */

/* Typography */
.font-title  { font-family: var(--font-title); }
.font-body   { font-family: var(--font-body); }
.font-ui     { font-family: var(--font-ui); }
.font-mono   { font-family: var(--font-mono); }

.text-gold     { color: var(--gold); }
.text-muted    { color: var(--text-muted); }
.text-success  { color: var(--success); }
.text-danger   { color: var(--danger); }
.text-warning  { color: var(--warning); }

/* Selection */
::selection {
    background: var(--gold);
    color: var(--bg-dark);
}

/* =========================================
   6. SHARED COMPONENT BASE STYLES
   ========================================= */

/* Generic floating panel (Market, Inventory, etc.) */
.panel {
    position: absolute;
    background: var(--bg-panel);
    border: 2px solid var(--wood-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-panel);
    color: var(--text-primary);
    font-family: var(--font-ui);
    pointer-events: auto;
    z-index: var(--z-panel);
}

/* CARD / PANELS (Bootstrap-compatible overrides) */
.card {
    background-color: #fffaf0;
    border: 2px solid var(--ink);
    border-radius: var(--radius-sm);
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
}

.card-header {
    background-color: var(--wood-dark);
    color: var(--gold);
    border-bottom: 2px solid var(--gold);
    font-family: var(--font-title);
    text-align: center;
}

/* BUTTONS */
.btn-primary {
    background-color: var(--primary-red);
    border-color: #5a0000;
    font-family: var(--font-title);
    transition: all var(--ease-smooth);
}

.btn-primary:hover {
    background-color: var(--primary-red-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* INPUT FIELDS */
.form-control {
    background-color: transparent;
    border: 1px solid var(--ink);
    border-radius: 0;
    font-family: var(--font-body);
    color: var(--ink);
}

.form-control:focus {
    background-color: #fff;
    border-color: var(--primary-red);
    box-shadow: 0 0 0 0.2rem rgba(139, 0, 0, 0.25);
}

/* ALERTS */
.alert-info, .alert-success, .alert-danger {
    border-left: 5px solid;
    font-weight: bold;
}

/* =========================================
   7. SHARED ANIMATIONS
   ========================================= */

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 8px var(--gold-glow); }
    50%      { box-shadow: 0 0 16px var(--gold-glow); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes goldFlash {
    0%   { color: var(--gold); text-shadow: 0 0 10px var(--gold-glow); }
    50%  { color: var(--gold-light); text-shadow: 0 0 20px var(--gold-glow); }
    100% { color: var(--gold); text-shadow: none; }
}

/* =========================================
   8. SYSTEM UI
   ========================================= */

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: var(--z-error);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--gold);
    stroke-width: 0.15rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--wood-dark);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    text-align: center;
    font-family: var(--font-title);
    color: var(--gold);
    font-weight: bold;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}