/*
 * Yurlas — Shared design tokens + dark mode.
 *
 * Single source of truth loaded on every surface (site public, dashboard,
 * espace privé, assistant, login assistant) via the core plugin so the theme
 * and the assistant reuse the exact same variables without duplicating them.
 *
 * Light values live in :root, dark values under :root[data-theme="dark"].
 * "System" mode is resolved to a concrete light/dark value by yurlas-theme.js,
 * so the CSS only ever has to react to data-theme.
 *
 * New premium components (footer, mobile nav, theme toggle) consume the --y-*
 * tokens directly. A bridge re-maps the legacy --pt-* tokens under dark so the
 * existing token-driven components adapt automatically.
 */

:root {
  color-scheme: light;

  --y-color-bg: #f7f7f5;
  --y-color-surface: #ffffff;
  --y-color-surface-alt: #f0efe8;
  --y-color-text: #222222;
  --y-color-text-muted: #5f6166;
  --y-color-border: #e3e1d8;
  --y-color-primary: #c89c45;
  --y-color-primary-hover: #b3863a;
  --y-color-primary-contrast: #1b1b1b;
  --y-radius: .65rem;
  --y-radius-lg: 1rem;
  --y-shadow: 0 1rem 2.8rem rgba(20, 20, 20, .08);
  --y-shadow-lg: 0 1.4rem 3.8rem rgba(20, 20, 20, .12);
  --y-overlay: rgba(23, 24, 25, .55);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --y-color-bg: #171819;
  --y-color-surface: #212326;
  --y-color-surface-alt: #2a2d31;
  --y-color-text: #f5f5f5;
  --y-color-text-muted: #b5b8bc;
  --y-color-border: #34373c;
  --y-color-primary: #c89c45;
  --y-color-primary-hover: #d8b15f;
  --y-color-primary-contrast: #1b1b1b;
  --y-shadow: 0 1rem 2.8rem rgba(0, 0, 0, .45);
  --y-shadow-lg: 0 1.4rem 3.8rem rgba(0, 0, 0, .55);
  --y-overlay: rgba(0, 0, 0, .66);

  /* --- Bridge: re-map legacy theme tokens to the anthracite palette. --- */
  --pt-ink: #f5f5f5;
  --pt-muted: #b5b8bc;
  --pt-surface: #171819;
  --pt-surface-soft: #1d1f22;
  --pt-surface-muted: #2a2d31;
  --pt-line: #34373c;
  --pt-gold-dark: #d8b15f;
  --pt-gold-soft: #3a3320;
  --pt-focus: rgba(200, 156, 69, .5);
  --pt-shadow-soft: 0 1rem 2.8rem rgba(0, 0, 0, .45);
  --pt-shadow-premium: 0 1.4rem 3.8rem rgba(0, 0, 0, .55);
  --paintoria-card: #212326;
  --paintoria-bg: #171819;
  --paintoria-border: #34373c;
}

/* Smooth, opt-out-friendly transition when toggling. */
@media (prefers-reduced-motion: no-preference) {
  :root.y-theme-ready body,
  :root.y-theme-ready .site-header,
  :root.y-theme-ready .site-footer {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  }
}

/* --- Broad dark sweep for the main chrome / surfaces (token-driven). --- */
[data-theme="dark"] body {
  background: var(--y-color-bg);
  color: var(--y-color-text);
}

[data-theme="dark"] .site-main {
  background:
    radial-gradient(circle at 72% 8rem, rgba(200, 156, 69, .06), transparent 22rem),
    var(--y-color-bg);
}

[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white {
  background: var(--y-color-surface-alt) !important;
  color: var(--y-color-text);
}

[data-theme="dark"] .card,
[data-theme="dark"] .pt-card,
[data-theme="dark"] .pt-sidebar-card,
[data-theme="dark"] .pt-dashboard-kpi,
[data-theme="dark"] .pt-gallery-card,
[data-theme="dark"] .pt-award-card,
[data-theme="dark"] .pt-detail-section,
[data-theme="dark"] .pt-modal .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .offcanvas {
  background: var(--y-color-surface);
  color: var(--y-color-text);
  border-color: var(--y-color-border);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--y-color-surface-alt);
  color: var(--y-color-text);
  border-color: var(--y-color-border);
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--y-color-text-muted);
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-dark {
  color: var(--y-color-text-muted) !important;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end,
[data-theme="dark"] hr {
  border-color: var(--y-color-border) !important;
}

[data-theme="dark"] .dropdown-item {
  color: var(--y-color-text);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background: var(--y-color-surface-alt);
  color: var(--y-color-text);
}

/* ====================================================================== */
/* Theme toggle control (shared site + assistant).                        */
/* ====================================================================== */

.y-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 .55rem;
  border: 1px solid var(--y-color-border);
  border-radius: 999px;
  background: var(--y-color-surface);
  color: var(--y-color-text);
  font: inherit;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.y-theme-toggle:hover,
.y-theme-toggle:focus-visible {
  border-color: var(--y-color-primary);
  color: var(--y-color-primary);
}

.y-theme-toggle__icon {
  font-size: 1.05rem;
  line-height: 1;
}

/* Swap the sun/moon glyph by current resolved theme. */
.y-theme-toggle .y-theme-toggle__icon--dark { display: none; }
[data-theme="dark"] .y-theme-toggle .y-theme-toggle__icon--light { display: none; }
[data-theme="dark"] .y-theme-toggle .y-theme-toggle__icon--dark { display: inline; }

.y-theme-toggle__label {
  font-weight: 600;
}

/* Inline (full-width) variant used inside the mobile fullscreen menu. */
.y-theme-toggle--block {
  width: 100%;
  height: auto;
  justify-content: space-between;
  padding: .7rem .9rem;
  border-radius: var(--y-radius);
}

/* ====================================================================== */
/* Assistant harmonisation (#8).                                          */
/* The Assistant already drives every surface through --pa-* custom       */
/* properties, so dark mode only has to re-map them to the anthracite     */
/* tokens — no rule duplication, the light default stays untouched.       */
/* ====================================================================== */

[data-theme="dark"] body.paintoria-assistant-shell,
[data-theme="dark"] .paintoria-assistant-shell {
  --pa-ink: #f5f5f5;
  --pa-muted: #b5b8bc;
  --pa-faint: #8a8f96;
  --pa-line: #34373c;
  --pa-line-strong: #3f4349;
  --pa-surface: #171819;
  --pa-panel: #212326;
  --pa-primary: #2a2d31;
  --pa-primary-ink: #f5f5f5;
  --pa-accent: #c89c45;
  --pa-accent-ink: #1a1304;
  --pa-danger-soft: #3a2424;
  --pa-success-soft: #1f2a22;
  --pa-warn-soft: #322a1a;
  --pa-info-soft: #1f2630;
  --pa-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .45);
}