/*
 * READ Landscapes — Design System Tokens
 * Single source of truth for all colors, fonts, and spacing.
 * Default theme is dark; `[data-theme="light"]` overrides at the end.
 */

:root {
    /* ── SURFACES (dark) ───────────────────────── */
    --bg-base:         #1C1917;   /* page background */
    --bg-card:         #252220;   /* cards, panels */
    --bg-nav:          #302D2A;   /* topbar, sidebar */
    --bg-modal:        #3A3633;   /* modals, drawers */
    --bg-input:        #151311;   /* form fields */
    --bg-olive:        #2C3A1E;   /* admin header blocks */
    --surface-1:       #252220;   /* alias for bg-card */
    --surface-2:       #2C2925;   /* slightly elevated */
    --surface-3:       #1F1C1A;   /* slightly recessed */

    /* ── TEXT (dark) ──────────────────────────── */
    --text-primary:    #F5F0EB;
    --text-body:       #C8C0B4;
    --text-secondary:  #D5BA97;
    --text-muted:      #8A7F74;

    /* ── ACCENTS — fills (universal) ──────────── */
    --terra:           #B9482E;
    --green:           #445632;

    /* ── ACCENTS — text on dark ───────────────── */
    --terra-text:      #D4715A;
    --green-text:      #7A9A64;

    /* ── ATTENTION (amber/gold) — "new", "stalled" alerts ──
       Semantic alias over the phase-4 amber so the redesign's "new badge",
       education rail tint, and future "changes requested" banner share one
       token without us inventing a parallel hex value. */
    --attention-fill:  var(--phase-4-fill);   /* #B07A1F */
    --attention-text:  var(--phase-4-text);   /* #D4A258 */

    /* ── BORDERS (dark) ───────────────────────── */
    --border:          rgba(255,255,255,0.07);
    --border-mid:      rgba(255,255,255,0.13);
    --border-tan:      #4A3F32;

    /* ── PHASE COLORS — fills (dark) ──────────── */
    --phase-1-fill:    #B9482E;   /* terra   */
    --phase-2-fill:    #445632;   /* green   */
    --phase-3-fill:    #2E5985;   /* blue    */
    --phase-4-fill:    #B07A1F;   /* amber   */
    --phase-5-fill:    #6B3A6E;   /* purple  */

    /* ── TOPBAR TEXT — fixed, always on dark nav ── */
    --topbar-text:        #C8C0B4;
    --topbar-text-strong: #F5F0EB;
    --topbar-text-muted:  #8A7F74;

    /* ── PHASE COLORS — text on dark ──────────── */
    --phase-1-text:    #D4715A;
    --phase-2-text:    #7A9A64;
    --phase-3-text:    #6B92BE;
    --phase-4-text:    #D4A258;
    --phase-5-text:    #A875A8;

    /* ── FONTS ────────────────────────────────── */
    --f-display:  'Agrandir', 'Arial Black', sans-serif;
    --f-accent:   'Libre Baskerville', Georgia, serif;
    --f-body:     'Aileron', Arial, sans-serif;
    --f-mono:     'DM Mono', monospace;

    /* ── SPACING ──────────────────────────────── */
    --radius:     7px;
    --radius-lg:  10px;
}

/* ────────────────────────────────────────────── */
/*  LIGHT THEME OVERRIDES                          */
/* ────────────────────────────────────────────── */
[data-theme="light"] {
    /* ── SURFACES (light) ─────────────────────── */
    --bg-base:         #FAF7F2;   /* warm cream page bg */
    --bg-card:         #FFFFFF;   /* clean white card */
    --bg-nav:          #2C2925;   /* topbar stays dark for logo readability + visual anchor */
    --bg-modal:        #FFFFFF;
    --bg-input:        #FFFFFF;
    --bg-olive:        #DDE5C8;
    --surface-1:       #FFFFFF;
    --surface-2:       #F5F0E8;
    --surface-3:       #EFE9DE;

    /* ── TEXT (light) ─────────────────────────── */
    --text-primary:    #1C1917;   /* warm dark */
    --text-body:       #3F3A35;
    --text-secondary:  #6B5A47;
    --text-muted:      #8A7F74;   /* same — works on both */

    /* ── BORDERS (light) ──────────────────────── */
    --border:          rgba(0,0,0,0.08);
    --border-mid:      rgba(0,0,0,0.16);
    --border-tan:      #C8B89A;

    /* ── ACCENTS — text on light (darker for contrast) */
    --terra-text:      #A03D24;
    --green-text:      #3A4A2C;

    /* ── PHASE COLORS — text on light ─────────── */
    --phase-1-text:    #A03D24;
    --phase-2-text:    #3A4A2C;
    --phase-3-text:    #1F4870;
    --phase-4-text:    #8C5F18;
    --phase-5-text:    #5A2F5C;
}

/* Smooth color transitions when toggling theme */
html { transition: background 0.2s ease; }
body, .card, .btn-primary, .btn-ghost, .form-input,
.admin-topbar, .client-topbar, .badge {
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}