/* ===================================================================
   --- FILRODEN GLOBAL THEME ---
   This file defines the global CSS variables for all 'filroden'
   modules. Using these variables ensures a consistent look and
   feel across all applications.
=================================================================== */

:root,
.rmucsc-chat-card {

    --version: 3.0;

    /* ==========================================
       TIER 1: CORE PALETTES
       ========================================== */
       
    /* Hue 1: Gold (HSL: 48, 15%) */
    --gold-100: hsl(48, 15%, 95%);
    --gold-200: hsl(48, 15%, 85%);
    --gold-300: hsl(48, 15%, 75%);
    --gold-400: hsl(48, 15%, 60%);
    --gold-500: hsl(48, 15%, 50%);
    --gold-600: hsl(48, 15%, 40%);
    --gold-700: hsl(48, 15%, 30%);
    --gold-800: hsl(48, 15%, 20%);
    --gold-900: hsl(48, 15%, 10%);

    --gold-accent:        hsl(48, 60%, 50%);
    --gold-accent-bright: hsl(48, 60%, 60%);
    --gold-accent-dark:   hsl(48, 60%, 40%);

    /* Hue 2: Teal (HSL: 205, 15%) */
    --teal-100: hsl(205, 15%, 95%);
    --teal-200: hsl(205, 15%, 85%);
    --teal-300: hsl(205, 15%, 75%);
    --teal-400: hsl(205, 15%, 60%);
    --teal-500: hsl(205, 15%, 50%);
    --teal-600: hsl(205, 15%, 40%);
    --teal-700: hsl(205, 15%, 30%);
    --teal-800: hsl(205, 15%, 20%);
    --teal-900: hsl(205, 15%, 10%);

    --teal-accent:        hsl(205, 60%, 50%);
    --teal-accent-bright: hsl(205, 60%, 60%);
    --teal-accent-dark:   hsl(205, 60%, 40%);
    
    /* Neutrals */
    --neutral-000: hsl(0, 0%, 100%); /* Pure White */
    --neutral-999: hsl(0, 0%, 0%);   /* Pure Black */

    /* Other colours */
    --success: hsl(130, 50%, 50%);
    --warning: hsl(33, 100%, 50%);
    --danger:  hsl(4, 90%, 60%);

    /* ==========================================
       LAYOUT & SPACING
       ========================================== */
    
    --radius-small: 3px;
    --radius-medium: 6px;
    --radius-large: 12px;

    /** Default fonts */
    --font-family: 'Roboto', 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', 'sans-serif';

    /** Font sizes */
    --font-size-xxs: 0.5rem;
    --font-size-xs: 0.75rem;
    --font-size-s: 0.9rem;
    --font-size-m: 1.0rem;
    --font-size-l: 1.2rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 2rem;

    --space-xxs: 0.125rem;     /* 2px */
    --space-xs: 0.25rem;       /* 4px */
    --space-s: 0.5rem;         /* 8px */
    --space-m: 0.625rem;       /* 10px */
    --space-l: 1rem;           /* 16px */
    --space-xl: 1.5rem;        /* 24px */
    --space-xxl: 2rem;         /* 32px */

    /* Line Heights */
    --line-height-heading: 1.2; /* For window titles, tight lists, and badges */
    --line-height-body: 1.4; /* For tooltips, textareas, and paragraph text */

    /** Wide letter spacing for titles. */
    --letter-spacing-wide: 0.05em;

    /* ==========================================
       DIRECTIONALITY
       ========================================== */

    /* 1 = Normal (LTR), -1 = Flipped (RTL) */
    --dir-flip: 1;
}

/* ==========================================
   TIER 2: THE HUE ROUTER
   ========================================== */

:root,
.hue-gold {
    --primary-100: var(--gold-100);
    --primary-200: var(--gold-200);
    --primary-300: var(--gold-300);
    --primary-400: var(--gold-400);
    --primary-500: var(--gold-500);
    --primary-600: var(--gold-600);
    --primary-700: var(--gold-700);
    --primary-800: var(--gold-800);
    --primary-900: var(--gold-900);

    --primary-accent: var(--gold-accent);
    --primary-accent-bright: var(--gold-accent-bright);
    --primary-accent-dark: var(--gold-accent-dark);
}

.hue-teal {
    --primary-100: var(--teal-100);
    --primary-200: var(--teal-200);
    --primary-300: var(--teal-300);
    --primary-400: var(--teal-400);
    --primary-500: var(--teal-500);
    --primary-600: var(--teal-600);
    --primary-700: var(--teal-700);
    --primary-800: var(--teal-800);
    --primary-900: var(--teal-900);

    --primary-accent: var(--teal-accent);
    --primary-accent-bright: var(--teal-accent-bright);
    --primary-accent-dark: var(--teal-accent-dark);
}

/* ==========================================
   TIER 3: SEMANTIC TOKENS (DARK THEME)
   ========================================== */

.theme-dark {
    /* --- Backgrounds --- */
    --bg-base:          var(--primary-900); /* Deepest background (App Window) */
    --bg-panel:         var(--primary-800); /* Elevated elements (Cards, Inputs, Sidebars) */
    --bg-muted:         var(--neutral-500); /* Disabled elements*/
    --bg-hover:         var(--primary-700); /* Interactive hover states */
    --bg-highlight:     var(--primary-600); /* Selected/Active states */

    /* --- Text --- */
    --text-primary:     var(--primary-100); /* Main readable text */
    --text-secondary:   var(--primary-200); /* Slightly dimmed text */
    --text-muted:       var(--primary-400); /* Placeholders, hints, disabled text */
    --text-inverse:     var(--primary-900); /* Text placed on top of the accent color */

    /* --- Borders & Outlines --- */
    --border-main:      var(--primary-700); /* Standard structural borders */
    --border-subtle:    var(--primary-800); /* Dividers inside panels */
    --border-focus:     var(--primary-accent); /* Focus rings (Accent) */

    /* --- Accents & Status --- */
    --accent-main:      var(--primary-accent);
    --accent-hover:     var(--primary-accent-bright);

    --color-success:    var(--success);
    --color-warning:    var(--warning);
    --color-danger:     var(--danger);

    /* --- Shadows --- */
    --shadow-window:    0 0 10px rgba(0, 0, 0, 0.85);
    --shadow-popout:    0 4px 10px rgba(0, 0, 0, 0.5);
    --shadow-focus:     0 0 5px var(--accent-main);
}

/* ==========================================
   TIER 3: SEMANTIC TOKENS (LIGHT THEME)
   ========================================== */

.theme-light {
    /* --- Backgrounds --- */
    --bg-base:          var(--primary-100);
    --bg-panel:         var(--neutral-000);
    --bg-muted:         var(--neutral-400);
    --bg-hover:         var(--primary-200);
    --bg-highlight:     var(--primary-300);

    /* --- Text --- */
    --text-primary:     var(--primary-900);
    --text-secondary:   var(--primary-800);
    --text-muted:       var(--primary-600);
    --text-inverse:     var(--neutral-000);

    /* --- Borders & Outlines --- */
    --border-main:      var(--primary-300);
    --border-subtle:    var(--primary-200);
    --border-focus:     var(--primary-accent-dark);

    /* --- Accents & Status --- */
    --accent-main:      var(--primary-accent-dark);
    --accent-hover:     var(--primary-accent);

    --color-success:    hsl(130, 60%, 35%);
    --color-warning:    hsl(33, 100%, 35%);
    --color-danger:     hsl(4, 90%, 45%);

    /* --- Shadows --- */
    --shadow-window:    0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-popout:    0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-focus:     0 0 5px var(--accent-main);
}