/*
  Semantic design tokens and theme system
  - Centralized variables for Light, Dark, and Sepia
  - WCAG 2.1 AA: 4.5:1 for text, 3:1 for UI components
  - No component-level hard-coded hex colors; use tokens only
*/

/* Google Fonts: modern Thai sans-serif */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');

/* Base tokens (Light by default) */
:root {
  /* Typography */
  --font-sans: 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  /* Core palette */
  --color-bg: #ffffff;
  --color-surface: #f7f7f8;
  --color-text: #111827; /* gray-900 */
  --color-subtle: #6b7280; /* gray-500 */
  --color-border: #d1d5db; /* gray-300 */
  --color-primary: #0d6efd; /* bootstrap blue-500 */
  --color-primary-contrast: #ffffff;
  /* States */
  --color-primary-hover: #0b5ed7; /* darker for better white contrast */
  --color-primary-active: #0a58ca;
  --focus-ring: #2563eb; /* indigo/blue visible on light + sepia */
  --color-page: #ffffff; /* PDF page must stay pure white */

  /* Feedback (light) */
  --color-info-bg: #e0f2ff;
  --color-info-text: #003a75;
  --color-danger-bg: #fde8e8;
  --color-danger-text: #7a1d1d;
  --color-warning-bg: #fff6e5;
  --color-warning-text: #663c00;

  /* Shadows, radii, transitions */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.10);
  --radius-md: 8px;
  --transition-fast: 120ms;
  --transition-slow: 280ms;
  --transition-easing: cubic-bezier(.2, .8, .2, 1);
}

/* Aliases used by styles.css (derived from semantic tokens) */
:root {
  /* Layered surfaces on top of page bg */
  --surface-1: color-mix(in oklab, var(--color-bg), black 4%);
  --surface-2: color-mix(in oklab, var(--color-bg), black 8%);
  --surface-3: color-mix(in oklab, var(--color-bg), black 12%);
  /* Semantic aliases */
  --border: var(--color-border);
  --primary: var(--color-primary);
  --on-primary: var(--color-primary-contrast);
  --text-2: var(--color-subtle);
}

/* Dark theme overrides (manual) */
[data-theme="dark"] {
  --color-bg: #0b0b0b;
  --color-surface: #151515;
  --color-text: #f2f4f8;
  --color-subtle: #c2c8cf;
  --color-border: #2a2f36;
  /* Dark-appropriate primary to ensure ≥3:1 against white label */
  --color-primary: #1e40af; /* indigo-800 */
  --color-primary-hover: #1b3a9c; /* indigo-900ish */
  --color-primary-active: #162f7d;
  --color-primary-contrast: #ffffff;
  --focus-ring: #60a5fa; /* sky-400 visible on dark */

  --color-info-bg: #0f2740;
  --color-info-text: #b3d8ff;
  --color-danger-bg: #3a0d0d;
  --color-danger-text: #ffd0d0;
  --color-warning-bg: #3a2a0d;
  --color-warning-text: #ffe3b0;
}

/* Sepia theme overrides (manual) */
[data-theme="sepia"] {
  --color-bg: #f4ecd8;
  --color-surface: #efe5cc;
  --color-text: #3b3025;
  --color-subtle: #6b5e50;
  --color-border: #d8cbb3;
  --color-primary: #8b5e34;
  --color-primary-hover: #744c2b;
  --color-primary-active: #5e3c22;
  --color-primary-contrast: #ffffff;
  --focus-ring: #b07a3d;

  --color-info-bg: #e8efe0;
  --color-info-text: #3b4a32;
  --color-danger-bg: #f3e0dc;
  --color-danger-text: #5e2b24;
  --color-warning-bg: #fae8c8;
  --color-warning-text: #5a3c10;
}

/* Respect system preference when no manual override is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0b0b0b;
    --color-surface: #151515;
    --color-text: #f2f4f8;
    --color-subtle: #c2c8cf;
    --color-border: #2a2f36;
    --color-primary: #1e40af;
    --color-primary-hover: #1b3a9c;
    --color-primary-active: #162f7d;
    --color-primary-contrast: #ffffff;
    --focus-ring: #60a5fa;

    --color-info-bg: #0f2740;
    --color-info-text: #b3d8ff;
    --color-danger-bg: #3a0d0d;
    --color-danger-text: #ffd0d0;
    --color-warning-bg: #3a2a0d;
    --color-warning-text: #ffe3b0;
  }
}

/* Bootstrap bridge: map semantic tokens to BS vars */
:root {
  --bs-font-sans-serif: var(--font-sans);
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-primary: var(--color-primary);
  --bs-border-color: var(--color-border);
  --bs-card-bg: var(--color-surface);
  --bs-card-color: var(--color-text);
  --bs-heading-color: var(--color-text);
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-primary-hover);
  --bs-btn-border-width: 1px;
}

/* Accent presets (brand color overrides) */
[data-accent="indigo"] {
  --color-primary: #4f46e5; /* indigo-600 */
  --color-primary-hover: #4338ca; /* indigo-700 */
  --color-primary-active: #3730a3; /* indigo-800 */
}
[data-accent="teal"] {
  --color-primary: #0d9488; /* teal-600 */
  --color-primary-hover: #0f766e; /* teal-700 */
  --color-primary-active: #115e59; /* teal-800 */
}
[data-accent="emerald"] {
  --color-primary: #059669; /* emerald-600 */
  --color-primary-hover: #047857; /* emerald-700 */
  --color-primary-active: #065f46; /* emerald-800 */
}
[data-accent="amber"] {
  --color-primary: #d97706; /* amber-600 */
  --color-primary-hover: #b45309; /* amber-700 */
  --color-primary-active: #92400e; /* amber-800 */
}
[data-accent="pink"] {
  --color-primary: #db2777; /* pink-600 */
  --color-primary-hover: #be185d; /* pink-700 */
  --color-primary-active: #9d174d; /* pink-800 */
}

/* Global elements */
body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); line-height: 1.6; }
.navbar { background-color: var(--color-surface) !important; color: var(--color-text); }
.navbar .navbar-brand, .navbar .nav-link { color: var(--color-text); }
.navbar .navbar-brand:hover, .navbar .nav-link:hover { color: var(--color-primary); background-color: transparent; }

/* Cards */
.card { background: var(--color-surface); color: var(--color-text); border:1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.card .text-muted { color: var(--color-subtle) !important; }

/* Buttons (accessible states) */
.btn-primary {
  --bs-btn-color: var(--color-primary-contrast);
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-active-bg: var(--color-primary-active);
  --bs-btn-active-border-color: var(--color-primary-active);
}
.btn-outline-light {
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-outline-light:hover {
  color: var(--color-bg);
  background-color: var(--color-text);
  border-color: var(--color-text);
}
.btn-secondary {
  color: var(--color-primary-contrast);
  background-color: color-mix(in oklab, var(--color-text) 12%, var(--color-bg));
  border-color: var(--color-border);
}
.btn-warning { background-color: var(--color-warning-bg); border-color: var(--color-warning-text); }
:root .btn-warning { color: var(--color-text); }
[data-theme="sepia"] .btn-warning { color: var(--color-text); }
[data-theme="dark"] .btn-warning { color: var(--color-primary-contrast); }
.btn:disabled, .btn.disabled { opacity: .65; }

/* Tables */
.table-dark {
  --bs-table-color: var(--color-text);
  --bs-table-bg: color-mix(in oklab, var(--color-bg), black 8%);
}
.table-dark.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: color-mix(in oklab, var(--color-bg), black 12%); }

/* Alerts */
.alert { border:1px solid var(--color-border); }
.alert-info { background-color: var(--color-info-bg); color: var(--color-info-text); }
.alert-warning { background-color: var(--color-warning-bg); color: var(--color-warning-text); }
.alert-danger { background-color: var(--color-danger-bg); color: var(--color-danger-text); }
.alert-secondary { background: color-mix(in oklab, var(--color-surface), var(--color-bg)); color: var(--color-text); }

/* Forms */
.form-label { color: var(--color-text); }
.form-control, .form-select {
  color: var(--color-text);
  background-color: color-mix(in oklab, var(--color-bg), black 6%);
  border:1px solid var(--color-border);
}
.form-control::placeholder { color: var(--color-subtle); }
.form-check-input { background-color: var(--color-bg); border-color: var(--color-border); }
.form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); }

/* Focus visibility */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Reader stage helpers */
.reader-toolbar { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.reader-stage { background: var(--color-bg); }
.reader-page canvas { background: var(--color-page); box-shadow: var(--shadow-md); border-radius: var(--radius-md); }