/* ============================================
   Shared Palette Variables
   Included by styles.css (@import) and viewer/docview pages (PHP include).
   Single source of truth for color palettes.
   ============================================ */

/* ============================================
   Light Theme Defaults (Concrete)
   ============================================ */
:root {
    color-scheme: light;

    /* Primary Colors */
    --color-primary: #64748b;
    --color-primary-hover: #475569;
    --color-primary-light: #e2e8f0;

    /* Accent Colors */
    --color-accent: #6b7280;
    --color-accent-light: #e5e7eb;

    /* Neutral Colors */
    --color-bg: #f1f5f9;
    --color-surface: #f8fafc;
    --color-surface-elevated: #ffffff;
    --color-border: #cbd5e1;
    --color-border-hover: #94a3b8;

    /* Text Colors */
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-text-muted: #94a3b8;
    --color-text-inverse: #ffffff;
    --color-on-primary: #ffffff; /* text color that sits on a --color-primary background */

    /* Semantic Colors */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
}

/* ============================================
   Color Palette Themes (Light Mode)
   ============================================ */

/* Blueprint - Classic blue (was default) */
[data-palette="blueprint"] {
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-light: #dbeafe;
    --color-accent: #6366f1;
    --color-accent-light: #e0e7ff;
    --color-bg: #f0f4ff;
    --color-surface: #f8faff;
    --color-border: #d0daf0;
    --color-border-hover: #b8c8e8;
}

/* Steel - Blue-gray metallic */
[data-palette="steel"] {
    --color-primary: #4b6584;
    --color-primary-hover: #3d5269;
    --color-primary-light: #dce4ec;
    --color-accent: #576574;
    --color-accent-light: #e0e4e8;
    --color-bg: #f0f4f8;
}

/* Timber - Warm wood browns */
[data-palette="timber"] {
    --color-primary: #92400e;
    --color-primary-hover: #78350f;
    --color-primary-light: #fef3c7;
    --color-accent: #a16207;
    --color-accent-light: #fef9c3;
    --color-bg: #fefcf8;
}

/* Copper - Warm bronze/orange */
[data-palette="copper"] {
    --color-primary: #c2410c;
    --color-primary-hover: #9a3412;
    --color-primary-light: #ffedd5;
    --color-accent: #ea580c;
    --color-accent-light: #fed7aa;
    --color-bg: #fffbf5;
}

/* Graphite - Charcoal drafting */
[data-palette="graphite"] {
    --color-primary: #374151;
    --color-primary-hover: #1f2937;
    --color-primary-light: #e5e7eb;
    --color-accent: #4b5563;
    --color-accent-light: #d1d5db;
    --color-bg: #f9fafb;
}

/* Terracotta - Earthy clay */
[data-palette="terracotta"] {
    --color-primary: #b45309;
    --color-primary-hover: #92400e;
    --color-primary-light: #fef3c7;
    --color-accent: #dc2626;
    --color-accent-light: #fecaca;
    --color-bg: #fef7f5;
}

/* Sage - Muted architectural green */
[data-palette="sage"] {
    --color-primary: #3f6212;
    --color-primary-hover: #365314;
    --color-primary-light: #ecfccb;
    --color-accent: #65a30d;
    --color-accent-light: #d9f99d;
    --color-bg: #f8faf5;
}

/* ============================================
   Dark Theme Overrides
   ============================================ */

/* Slate Grey Dark (default dark) — Bootstrap grey scale */
[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #212529;               /* carbon-black */
    --color-surface: #2b3035;          /* between carbon & gunmetal */
    --color-surface-elevated: #343a40; /* gunmetal */
    --color-border: #495057;           /* iron-grey */
    --color-border-hover: #6c757d;     /* slate-grey */
    --color-text-primary: #f8f9fa;     /* bright-snow */
    --color-text-secondary: #dee2e6;   /* alabaster-grey */
    --color-text-muted: #adb5bd;       /* pale-slate-2 */
    --color-primary: #ced4da;          /* pale-slate */
    --color-primary-hover: #e9ecef;    /* platinum */
    --color-primary-light: oklch(0.22 0 0);
    --color-on-primary: var(--color-bg); /* dark text — primary is light */
    --color-accent: #adb5bd;           /* pale-slate-2 */
    --color-accent-light: #343a40;     /* gunmetal */
}

/* Blueprint Dark */
[data-palette="blueprint"][data-theme="dark"] {
    --color-bg: oklch(0.14 0.03 260);
    --color-surface: oklch(0.19 0.025 260);
    --color-surface-elevated: oklch(0.24 0.02 260);
    --color-border: oklch(0.26 0.02 260);
    --color-border-hover: oklch(0.33 0.015 260);
    --color-primary-light: oklch(0.22 0.06 260);
    --color-primary: #2563eb;
    --color-primary-hover: #3b82f6;
    --color-on-primary: #ffffff; /* light text — primary is saturated */
    --color-accent: #818cf8;
    --color-accent-light: oklch(0.22 0.06 277);
}

/* Steel Dark */
[data-palette="steel"][data-theme="dark"] {
    --color-bg: oklch(0.14 0.025 230);
    --color-surface: oklch(0.19 0.02 230);
    --color-surface-elevated: oklch(0.24 0.018 230);
    --color-border: oklch(0.26 0.018 230);
    --color-border-hover: oklch(0.33 0.015 230);
    --color-primary: #7c9ab8;
    --color-primary-hover: #a3bdd4;
    --color-primary-light: oklch(0.20 0.04 230);
    --color-on-primary: var(--color-bg); /* dark text — primary is light */
    --color-accent: #8899a8;
    --color-accent-light: oklch(0.24 0.02 230);
}

/* Timber Dark */
[data-palette="timber"][data-theme="dark"] {
    --color-bg: oklch(0.14 0.025 60);
    --color-surface: oklch(0.19 0.02 60);
    --color-surface-elevated: oklch(0.24 0.018 60);
    --color-border: oklch(0.26 0.018 60);
    --color-border-hover: oklch(0.33 0.015 60);
    --color-primary: #d97706;
    --color-primary-hover: #f59e0b;
    --color-primary-light: oklch(0.20 0.04 60);
    --color-on-primary: #ffffff; /* light text — primary is saturated */
    --color-accent: #ca8a04;
    --color-accent-light: oklch(0.24 0.025 60);
}

/* Copper Dark */
[data-palette="copper"][data-theme="dark"] {
    --color-bg: oklch(0.14 0.025 40);
    --color-surface: oklch(0.19 0.02 40);
    --color-surface-elevated: oklch(0.24 0.018 40);
    --color-border: oklch(0.26 0.018 40);
    --color-border-hover: oklch(0.33 0.015 40);
    --color-primary: #f97316;
    --color-primary-hover: #fb923c;
    --color-primary-light: oklch(0.20 0.04 40);
    --color-on-primary: #ffffff; /* light text — primary is saturated */
    --color-accent: #ea580c;
    --color-accent-light: oklch(0.24 0.025 40);
}

/* Graphite Dark */
[data-palette="graphite"][data-theme="dark"] {
    --color-bg: oklch(0.13 0.002 0);
    --color-surface: oklch(0.18 0.002 0);
    --color-surface-elevated: oklch(0.23 0.002 0);
    --color-border: oklch(0.25 0.002 0);
    --color-border-hover: oklch(0.32 0.002 0);
    --color-primary: #a1a1aa;
    --color-primary-hover: #d4d4d8;
    --color-primary-light: oklch(0.19 0.003 0);
    --color-on-primary: var(--color-bg); /* dark text — primary is light */
    --color-accent: #71717a;
    --color-accent-light: oklch(0.23 0.003 0);
}

/* Terracotta Dark */
[data-palette="terracotta"][data-theme="dark"] {
    --color-bg: oklch(0.14 0.02 25);
    --color-surface: oklch(0.19 0.018 25);
    --color-surface-elevated: oklch(0.24 0.016 25);
    --color-border: oklch(0.26 0.016 25);
    --color-border-hover: oklch(0.33 0.014 25);
    --color-primary: #ea580c;
    --color-primary-hover: #f97316;
    --color-primary-light: oklch(0.20 0.04 25);
    --color-on-primary: #ffffff; /* light text — primary is saturated */
    --color-accent: #ef4444;
    --color-accent-light: oklch(0.24 0.02 25);
}

/* Sage Dark */
[data-palette="sage"][data-theme="dark"] {
    --color-bg: oklch(0.14 0.02 145);
    --color-surface: oklch(0.19 0.018 145);
    --color-surface-elevated: oklch(0.24 0.016 145);
    --color-border: oklch(0.26 0.016 145);
    --color-border-hover: oklch(0.33 0.014 145);
    --color-primary: #84cc16;
    --color-primary-hover: #a3e635;
    --color-primary-light: oklch(0.20 0.04 145);
    --color-on-primary: var(--color-bg); /* dark text — primary is light */
    --color-accent: #65a30d;
    --color-accent-light: oklch(0.24 0.02 145);
}