/* ============================================================================
   ALNAQL THEMES — Skin Definitions
   ============================================================================

   Each theme overrides TIER 2 (semantic) tokens from variables.css.
   Switch themes: document.documentElement.setAttribute('data-theme', 'night-scholar')
   Persist: localStorage.setItem('alnaql_theme', 'night-scholar')

   Available themes:
   1. (default)         Manuscript     — warm sand/parchment (no data-theme needed)
   2. night-scholar     Night Scholar  — dark charcoal with amber accents
   3. high-contrast     High Contrast  — WCAG AAA, maximum readability
   4. ocean             Ocean          — cool blue-gray scholarly tones
   5. classic-print     Classic Print  — monochrome, minimal color, like a printed book

   ============================================================================ */


/* ============================================================================
   NIGHT SCHOLAR — For extended reading sessions
   Deep charcoal surfaces with warm amber accents.
   ============================================================================ */

[data-theme="night-scholar"] {
    /* Brand / Action */
    --color-primary:         var(--p-amber-500);
    --color-primary-dark:    var(--p-amber-600);
    --color-primary-darker:  var(--p-amber-700);
    --color-primary-light:   var(--p-amber-300);

    /* Sand → dark equivalents */
    --color-sand:          var(--p-gray-800);
    --color-sand-light:    var(--p-gray-900);
    --color-sand-lighter:  #0D0D0D;
    --color-sand-medium:   var(--p-gray-700);
    --color-sand-footer:   var(--p-gray-800);

    /* Surfaces */
    --color-surface-primary:   #111111;
    --color-surface-secondary: var(--p-gray-900);
    --color-surface-elevated:  var(--p-gray-800);
    --color-surface-overlay:   rgba(0, 0, 0, 0.7);
    --color-surface-sunken:    #0A0A0A;
    --color-surface-page:      #1A1A1A;

    /* Text */
    --color-text-primary:    #E8E4DF;
    --color-text-secondary:  var(--p-gray-400);
    --color-text-muted:      var(--p-sand-800);
    --color-text-inverse:    var(--p-gray-900);
    --color-text-link:       var(--p-amber-400);
    --color-text-link-hover: var(--p-amber-300);

    /* Grays */
    --color-gray-light:        var(--p-gray-800);
    --color-gray-border:       var(--p-gray-700);
    --color-gray-medium:       var(--p-gray-600);

    /* Borders */
    --color-border-primary:   var(--p-gray-700);
    --color-border-secondary: var(--p-gray-800);
    --color-border-subtle:    var(--p-gray-800);

    /* Desert accents in dark */
    --color-chocolate: var(--p-amber-600);
    --color-sienna:    var(--p-amber-700);
    --color-peru:      var(--p-amber-500);
    --color-goldenrod: var(--p-amber-600);

    /* Buttons */
    --color-button-primary:        var(--p-amber-500);
    --color-button-primary-hover:  var(--p-amber-400);
    --color-button-secondary:      var(--p-gray-600);
    --color-button-secondary-hover: var(--p-gray-500);

    /* Density ramp (adjusted for dark backgrounds) */
    --color-density-1:  #818CF8;   /* lighter indigo */
    --color-density-2:  #6366F1;
    --color-density-3:  #60A5FA;   /* lighter blue */
    --color-density-4:  #22D3EE;   /* cyan */
    --color-density-5:  #34D399;   /* emerald */
    --color-density-6:  #A3E635;   /* lime */
    --color-density-7:  #FACC15;   /* yellow */
    --color-density-8:  #FB923C;   /* orange */
    --color-density-9:  #F87171;   /* red */
    --color-density-10: #EF4444;   /* bright red */

    /* Legacy highlights */
    --color-highlight-high:    rgba(251, 146, 60, 0.35);
    --color-highlight-medium:  rgba(251, 146, 60, 0.25);
    --color-highlight-low:     rgba(251, 191, 36, 0.20);
    --color-highlight-minimal: rgba(251, 191, 36, 0.12);

    /* Search */
    --color-search-highlight: rgba(250, 204, 21, 0.30);
    --color-search-border:    var(--p-amber-500);
    --color-search-glow:      rgba(250, 204, 21, 0.25);

    /* Gradients */
    --gradient-home:   linear-gradient(135deg, #111111 0%, #1A1A18 100%);
    --gradient-button: linear-gradient(135deg, var(--p-amber-600) 0%, var(--p-amber-700) 100%);

    --color-white: var(--p-gray-900);

    /* Shadows — glow-style for dark */
    --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.40);
    --shadow-md:     0 2px 8px rgba(0, 0, 0, 0.50);
    --shadow-lg:     0 4px 16px rgba(0, 0, 0, 0.50);
    --shadow-xl:     0 8px 32px rgba(0, 0, 0, 0.60);
    --shadow-2xl:    0 16px 48px rgba(0, 0, 0, 0.60);
    --shadow-nav:    0 1px 4px rgba(0, 0, 0, 0.40);
    --shadow-sidebar: 2px 0 12px rgba(0, 0, 0, 0.40);

    /* Component tokens */
    --nav-bg:     var(--color-surface-elevated);
    --nav-text:   var(--color-text-primary);
    --sidebar-bg: var(--color-surface-secondary);
    --footer-bg:  var(--color-surface-elevated);
    --card-bg:    var(--color-surface-secondary);
    --page-bg:    var(--color-surface-page);
    --page-text:  var(--color-text-primary);
    --panel-bg:   var(--color-surface-secondary);
    --panel-shadow: 0 0 24px rgba(0, 0, 0, 0.50);

    /* Focus */
    --focus-outline-color: var(--p-amber-400);
}


/* ============================================================================
   HIGH CONTRAST — WCAG AAA (7:1 minimum contrast ratio)
   Maximum readability. No decoration. Pure information.
   ============================================================================ */

[data-theme="high-contrast"] {
    /* Brand */
    --color-primary:         #1B4F72;
    --color-primary-dark:    #154360;
    --color-primary-darker:  #0E2F44;
    --color-primary-light:   #2E86C1;

    /* Sand → pure neutrals */
    --color-sand:          #E0E0E0;
    --color-sand-light:    #F5F5F5;
    --color-sand-lighter:  var(--p-white);
    --color-sand-medium:   #BDBDBD;
    --color-sand-footer:   #E0E0E0;

    /* Surfaces */
    --color-surface-primary:   var(--p-white);
    --color-surface-secondary: var(--p-white);
    --color-surface-elevated:  #F0F0F0;
    --color-surface-overlay:   rgba(0, 0, 0, 0.6);
    --color-surface-sunken:    #F5F5F5;
    --color-surface-page:      var(--p-white);

    /* Text — maximum contrast */
    --color-text-primary:    var(--p-black);
    --color-text-secondary:  #333333;
    --color-text-muted:      #444444;
    --color-text-inverse:    var(--p-white);
    --color-text-link:       #0645AD;
    --color-text-link-hover: #0B0080;

    /* Grays */
    --color-gray-light:  #E0E0E0;
    --color-gray-border: #999999;
    --color-gray-medium: #666666;

    /* Borders — visible */
    --color-border-primary:   #666666;
    --color-border-secondary: #999999;
    --color-border-subtle:    #BDBDBD;

    /* Desert accents → blue-based */
    --color-chocolate: #1B4F72;
    --color-sienna:    #154360;
    --color-peru:      #2E86C1;
    --color-goldenrod: #1B4F72;

    /* Buttons */
    --color-button-primary:        #1B4F72;
    --color-button-primary-hover:  #0E2F44;

    /* Density ramp — high contrast, thick saturation */
    --color-density-1:  #4338CA;
    --color-density-2:  #3730A3;
    --color-density-3:  #1D4ED8;
    --color-density-4:  #0E7490;
    --color-density-5:  #047857;
    --color-density-6:  #4D7C0F;
    --color-density-7:  #A16207;
    --color-density-8:  #C2410C;
    --color-density-9:  #B91C1C;
    --color-density-10: #7F1D1D;

    /* Legacy highlights — thicker borders instead */
    --color-highlight-high:    rgba(185, 28, 28, 0.45);
    --color-highlight-medium:  rgba(234, 88, 12, 0.40);
    --color-highlight-low:     rgba(101, 163, 13, 0.35);
    --color-highlight-minimal: rgba(30, 64, 175, 0.25);

    /* Search */
    --color-search-highlight: #FFFF00;
    --color-search-border:    var(--p-black);
    --color-search-glow:      rgba(255, 255, 0, 0.5);

    /* Gradients — flat (no gradients in HC mode) */
    --gradient-home:   #F5F5F5;
    --gradient-button: #E0E0E0;

    --color-white: var(--p-white);

    /* Shadows — sharper, more defined */
    --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow-md:     0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-lg:     0 4px 8px rgba(0, 0, 0, 0.25);

    /* Focus — thick and obvious */
    --focus-outline-color: var(--p-black);
    --focus-outline-width: 3px;
    --focus-outline-offset: 3px;
}


/* ============================================================================
   OCEAN — Cool blue-gray scholarly tones
   A fresh alternative for scholars who prefer cooler palettes.
   ============================================================================ */

[data-theme="ocean"] {
    /* Brand */
    --color-primary:         var(--p-blue-600);
    --color-primary-dark:    var(--p-blue-700);
    --color-primary-darker:  var(--p-blue-900);
    --color-primary-light:   var(--p-blue-400);

    /* Sand → blue-gray equivalents */
    --color-sand:          var(--p-slate-200);
    --color-sand-light:    var(--p-slate-50);
    --color-sand-lighter:  var(--p-white);
    --color-sand-medium:   var(--p-slate-300);
    --color-sand-footer:   var(--p-slate-100);

    /* Surfaces */
    --color-surface-primary:   var(--p-slate-50);
    --color-surface-secondary: var(--p-white);
    --color-surface-elevated:  var(--p-slate-200);
    --color-surface-overlay:   rgba(15, 23, 42, 0.5);
    --color-surface-sunken:    var(--p-slate-100);
    --color-surface-page:      var(--p-white);

    /* Text */
    --color-text-primary:    var(--p-slate-900);
    --color-text-secondary:  var(--p-slate-500);
    --color-text-muted:      var(--p-slate-600);
    --color-text-inverse:    var(--p-white);
    --color-text-link:       var(--p-blue-600);
    --color-text-link-hover: var(--p-blue-700);

    /* Grays */
    --color-gray-light:  var(--p-slate-100);
    --color-gray-border: var(--p-slate-200);
    --color-gray-medium: var(--p-slate-400);

    /* Borders */
    --color-border-primary:   var(--p-slate-300);
    --color-border-secondary: var(--p-slate-200);
    --color-border-subtle:    var(--p-slate-100);

    /* Desert accents → blue versions */
    --color-chocolate: var(--p-blue-500);
    --color-sienna:    var(--p-blue-600);
    --color-peru:      var(--p-blue-400);
    --color-goldenrod: var(--p-teal-600);

    /* Buttons */
    --color-button-primary:        var(--p-blue-600);
    --color-button-primary-hover:  var(--p-blue-700);

    /* Density ramp */
    --color-density-1:  #7C3AED;   /* violet */
    --color-density-2:  #6D28D9;
    --color-density-3:  #2563EB;   /* blue */
    --color-density-4:  #0891B2;   /* cyan */
    --color-density-5:  #059669;   /* emerald */
    --color-density-6:  #65A30D;   /* lime */
    --color-density-7:  #CA8A04;   /* yellow */
    --color-density-8:  #EA580C;   /* orange */
    --color-density-9:  #DC2626;   /* red */
    --color-density-10: #991B1B;

    /* Search */
    --color-search-highlight: var(--p-blue-100);
    --color-search-border:    var(--p-blue-400);
    --color-search-glow:      rgba(59, 130, 246, 0.3);

    /* Gradients */
    --gradient-home:   linear-gradient(135deg, var(--p-slate-100) 0%, var(--p-blue-50) 100%);
    --gradient-button: linear-gradient(135deg, var(--p-blue-500) 0%, var(--p-blue-600) 100%);

    --color-white: var(--p-white);

    /* Focus */
    --focus-outline-color: var(--p-blue-500);
}


/* ============================================================================
   CLASSIC PRINT — Monochrome, minimal color, like a printed book
   For scholars who want the text to speak without visual distraction.
   ============================================================================ */

[data-theme="classic-print"] {
    /* Brand — understated charcoal */
    --color-primary:         var(--p-gray-700);
    --color-primary-dark:    var(--p-gray-800);
    --color-primary-darker:  var(--p-gray-900);
    --color-primary-light:   var(--p-gray-500);

    /* Sand → warm white/cream */
    --color-sand:          #EDE8E0;
    --color-sand-light:    #F7F4F0;
    --color-sand-lighter:  #FFFDF7;
    --color-sand-medium:   #D8D0C4;
    --color-sand-footer:   #EDE8E0;

    /* Surfaces */
    --color-surface-primary:   #F7F4F0;
    --color-surface-secondary: #FFFDF7;
    --color-surface-elevated:  #EDE8E0;
    --color-surface-overlay:   rgba(0, 0, 0, 0.4);
    --color-surface-sunken:    #F0ECE6;
    --color-surface-page:      #FFFDF7;

    /* Text — near black */
    --color-text-primary:    #1A1A1A;
    --color-text-secondary:  #555555;
    --color-text-muted:      #666666;
    --color-text-inverse:    #FFFDF7;
    --color-text-link:       #333333;
    --color-text-link-hover: #111111;

    /* Grays */
    --color-gray-light:  #EDEDED;
    --color-gray-border: #CCCCCC;
    --color-gray-medium: #999999;

    /* Borders */
    --color-border-primary:   #CCCCCC;
    --color-border-secondary: #DDDDDD;
    --color-border-subtle:    #EEEEEE;

    /* Desert accents → monochrome */
    --color-chocolate: var(--p-gray-600);
    --color-sienna:    var(--p-gray-700);
    --color-peru:      var(--p-gray-500);
    --color-goldenrod: var(--p-gray-600);

    /* Buttons */
    --color-button-primary:        var(--p-gray-700);
    --color-button-primary-hover:  var(--p-gray-800);

    /* Density ramp — grayscale with hints of warmth */
    --color-density-1:  #6B7280;   /* gray */
    --color-density-2:  #6366F1;   /* hint of indigo */
    --color-density-3:  #4B5563;   /* darker gray */
    --color-density-4:  #0F766E;   /* hint of teal */
    --color-density-5:  #374151;
    --color-density-6:  #4D7C0F;   /* hint of green */
    --color-density-7:  #92400E;   /* hint of amber */
    --color-density-8:  #9A3412;   /* hint of orange */
    --color-density-9:  #991B1B;   /* hint of red */
    --color-density-10: #7F1D1D;

    /* Legacy highlights — very subtle */
    --color-highlight-high:    rgba(55, 65, 81, 0.30);
    --color-highlight-medium:  rgba(55, 65, 81, 0.22);
    --color-highlight-low:     rgba(55, 65, 81, 0.15);
    --color-highlight-minimal: rgba(55, 65, 81, 0.08);

    /* Search */
    --color-search-highlight: #FFF3BF;
    --color-search-border:    #D4A853;
    --color-search-glow:      rgba(212, 168, 83, 0.3);

    /* Gradients — flat */
    --gradient-home:   #F7F4F0;
    --gradient-button: linear-gradient(135deg, #D8D0C4 0%, #C8BEB0 100%);

    --color-white: #FFFDF7;

    /* Shadows — very soft */
    --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:     0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg:     0 4px 8px rgba(0, 0, 0, 0.06);
    --shadow-xl:     0 8px 16px rgba(0, 0, 0, 0.06);

    /* Focus */
    --focus-outline-color: var(--p-gray-700);
}


/* ============================================================================
   AUTO DARK MODE — If no explicit theme set, respect OS preference
   Falls back to Night Scholar palette.
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        /* Only activate if user hasn't explicitly chosen a theme */
    }
    /* Uncomment the block above and copy Night Scholar tokens
       to enable auto-dark. Disabled by default so Manuscript is always
       the first experience — users opt into dark mode explicitly. */
}