/* ═══════════════════════════════════════════════════════════════════
   ARTIS v19 — DESIGN TOKENS
   Variables CSS pour mode clair + mode sombre
   Modifier ici pour ajuster le thème global
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   FAMILLES TYPOGRAPHIQUES
   ───────────────────────────────────────────────────────────────── */
:root {
  --font-display: 'Fraunces', Georgia, serif;
  --font-base: 'Inter', system-ui, -apple-system, sans-serif;   /* surchargé par preferences.js */
  --font-body: var(--font-base);
  --font-mono: 'Geist Mono', 'JetBrains Mono', monospace;
}

/* ─────────────────────────────────────────────────────────────────
   ESPACEMENTS · grille 4 et 8 px
   ───────────────────────────────────────────────────────────────── */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
}

/* ─────────────────────────────────────────────────────────────────
   RAYONS
   ───────────────────────────────────────────────────────────────── */
:root {
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
}

/* ─────────────────────────────────────────────────────────────────
   TAILLES TEXTE — multipliées par --font-scale (préférence utilisateur)
   ───────────────────────────────────────────────────────────────── */
:root {
  --font-scale: 1;
  --text-xs:   calc(11px * var(--font-scale));
  --text-sm:   calc(13px * var(--font-scale));
  --text-base: calc(14px * var(--font-scale));
  --text-md:   calc(15px * var(--font-scale));
  --text-lg:   calc(18px * var(--font-scale));
  --text-xl:   calc(22px * var(--font-scale));
  --text-2xl:  calc(28px * var(--font-scale));
  --text-3xl:  calc(36px * var(--font-scale));
  --text-4xl:  calc(44px * var(--font-scale));
}

/* ─────────────────────────────────────────────────────────────────
   LARGEURS SIDEBAR + CARNET (variables pour cohérence)
   ───────────────────────────────────────────────────────────────── */
:root {
  --sidebar-w: 240px;
  --scratch-w: 320px;
  --topbar-h: 56px;
}

/* ─────────────────────────────────────────────────────────────────
   COULEURS PRIMAIRES · invariantes par thème
   (palette de marque : ardoise + vert forêt + lagoon + amber)
   ───────────────────────────────────────────────────────────────── */
:root {
  --c-forest: #1B4332;        /* Vert forêt principal */
  --c-forest-light: #52796F;  /* Vert clair */
  --c-moss: #95D5B2;          /* Mousse · réservé highlights */
  --c-lagoon: #2A9D8F;         /* Lagoon · info */
  --c-coral: #C44536;          /* Coral · alerte */
  --c-amber: #B07D2B;          /* Amber · warning · carnet */
  --c-sand: #DDB892;           /* Sable · accents secondaires */
  --c-paper: #FFFCF3;          /* Papier · fond carnet clair */
}

/* ═══════════════════════════════════════════════════════════════════
   MODE CLAIR (par défaut)
   ═══════════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
  /* Surfaces */
  --bg: #FAFAF7;              /* Fond principal */
  --surface: #FFFFFF;          /* Cards, panneaux */
  --surface-elevated: #FFFFFF; /* Modals, popovers */
  --sidebar-bg: #F4F2EC;       /* Fond sidebar gauche */
  --scratch-bg-start: #FFFCF3; /* Carnet — dégradé haut */
  --scratch-bg-end: #FDF8E8;   /* Carnet — dégradé bas */

  /* Texte */
  --ink: #0F1F1B;              /* Texte principal */
  --ink-soft: #5C6B66;         /* Texte secondaire */
  --ink-dim: #97A19D;          /* Texte tertiaire / placeholders */
  --ink-inverse: #FFFFFF;      /* Texte sur fond foncé */

  /* Bordures */
  --border: #E8E5DD;
  --border-soft: #F0EDE4;
  --border-strong: #D6D2C7;

  /* Sémantiques */
  --c-success: var(--c-forest-light);
  --c-success-bg: rgba(82, 121, 111, 0.1);
  --c-warning: var(--c-amber);
  --c-warning-bg: rgba(176, 125, 43, 0.1);
  --c-danger: var(--c-coral);
  --c-danger-bg: rgba(196, 69, 54, 0.1);
  --c-info: var(--c-lagoon);
  --c-info-bg: rgba(42, 157, 143, 0.1);

  /* Highlights */
  --hover-bg: #ECE9E0;
  --active-bg: var(--c-forest);
  --active-fg: #FFFFFF;
  --selected-bg: rgba(27, 67, 50, 0.08);
  --focus-ring: rgba(27, 67, 50, 0.25);

  /* Carnet jaune */
  --paper-border: rgba(232, 201, 155, 0.6);
  --paper-ink: #5C4A1C;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);

  /* Scrollbar */
  --scrollbar-thumb: #E8E5DD;
  --scrollbar-track: transparent;
}

/* ═══════════════════════════════════════════════════════════════════
   MODE SOMBRE
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Surfaces */
  --bg: #0E1411;              /* Fond principal sombre profond */
  --surface: #161D19;          /* Cards */
  --surface-elevated: #1D2622; /* Modals, popovers */
  --sidebar-bg: #131816;       /* Sidebar */
  --scratch-bg-start: #1F1B12; /* Carnet sombre — dégradé haut */
  --scratch-bg-end: #1A1710;   /* Carnet sombre — dégradé bas */

  /* Texte */
  --ink: #E8E5DD;              /* Texte principal clair */
  --ink-soft: #9CA8A2;         /* Texte secondaire */
  --ink-dim: #5C6B66;          /* Texte tertiaire */
  --ink-inverse: #0F1F1B;      /* Texte sur fond clair */

  /* Bordures */
  --border: #262E2A;
  --border-soft: #1D2521;
  --border-strong: #364139;

  /* Sémantiques (mêmes couleurs primaires mais bg adapté) */
  --c-success: var(--c-moss);
  --c-success-bg: rgba(149, 213, 178, 0.12);
  --c-warning: #D4A574;
  --c-warning-bg: rgba(212, 165, 116, 0.12);
  --c-danger: #E76F51;
  --c-danger-bg: rgba(231, 111, 81, 0.12);
  --c-info: #5EBDB0;
  --c-info-bg: rgba(94, 189, 176, 0.12);

  /* Highlights */
  --hover-bg: #1D2521;
  --active-bg: var(--c-moss);
  --active-fg: var(--c-forest);
  --selected-bg: rgba(149, 213, 178, 0.1);
  --focus-ring: rgba(149, 213, 178, 0.3);

  /* Carnet sombre */
  --paper-border: rgba(176, 125, 43, 0.3);
  --paper-ink: #E8C99B;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.7);

  /* Scrollbar */
  --scrollbar-thumb: #2E3833;
  --scrollbar-track: transparent;
}

/* ─────────────────────────────────────────────────────────────────
   SYSTÈME · auto si pas de préférence sauvegardée
   ───────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    /* Réapplique les variables sombres */
    --bg: #0E1411;
    --surface: #161D19;
    --surface-elevated: #1D2622;
    --sidebar-bg: #131816;
    --scratch-bg-start: #1F1B12;
    --scratch-bg-end: #1A1710;
    --ink: #E8E5DD;
    --ink-soft: #9CA8A2;
    --ink-dim: #5C6B66;
    --ink-inverse: #0F1F1B;
    --border: #262E2A;
    --border-soft: #1D2521;
    --border-strong: #364139;
    --c-success: var(--c-moss);
    --c-success-bg: rgba(149, 213, 178, 0.12);
    --c-warning: #D4A574;
    --c-warning-bg: rgba(212, 165, 116, 0.12);
    --c-danger: #E76F51;
    --c-danger-bg: rgba(231, 111, 81, 0.12);
    --c-info: #5EBDB0;
    --c-info-bg: rgba(94, 189, 176, 0.12);
    --hover-bg: #1D2521;
    --active-bg: var(--c-moss);
    --active-fg: var(--c-forest);
    --selected-bg: rgba(149, 213, 178, 0.1);
    --focus-ring: rgba(149, 213, 178, 0.3);
    --paper-border: rgba(176, 125, 43, 0.3);
    --paper-ink: #E8C99B;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.7);
    --scrollbar-thumb: #2E3833;
  }
}

/* ─────────────────────────────────────────────────────────────────
   TRANSITION FLUIDE entre les modes
   ───────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* Désactivé pour les transitions internes des composants */
button, a, input, textarea, .no-theme-transition {
  transition: none;
}