/* Design tokens WEBLABLA — direction artistique « bento coloré ».
   Sable en fond, cartes blanches très arrondies, encre quasi noire pour les
   éléments forts, violet pour l'action, quatre pastels qui portent le sens
   (lime = actif/payé, lilas = devis/projets, orange = retard/échéance,
   menthe = communication). Police Bricolage Grotesque.

   Trois états de thème :
   - <html data-theme="light"> : clair forcé par l'utilisateur
   - <html data-theme="dark">  : sombre forcé par l'utilisateur
   - aucun attribut            : suit le réglage système (prefers-color-scheme)
   Le choix est mémorisé dans localStorage et appliqué par /js/theme.js. */

/* Police hébergée localement (variable : graisse + taille optique) — plus de dépendance à Google Fonts. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/bricolage-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  --color-bg-top: #EEEBE3;
  --color-bg: #EEEBE3;
  --color-surface: #FFFFFF;
  --color-surface-hollow: #F4F2EC;
  --color-border: #E4E0D6;
  --color-border-soft: #EFECE4;
  --color-text: #1B1A17;
  --color-text-muted: #5C5A52;
  --color-text-faint: #6B685D;
  /* Surfaces neutres de la DA (blanc, sables) : elles s'inversent en thème sombre — ne plus écrire de #FFF / #EFEDE4 en dur */
  --surf-blanc: #FFFFFF;
  --surf-sable-clair: #F4F2EC;
  --surf-sable: #EFEDE4;
  --surf-creux: #E3DED4;
  --txt-encre: #1B1A17;
  --txt-neutre: #1B1A17;

  --color-accent: #6B4EFF;
  --color-accent-hover: #5B3FE6;
  --color-accent-light: #E4DEFF;
  --color-accent-contrast: #FFFFFF;

  --color-ink: #1B1A17;
  --color-ink-contrast: #FFFFFF;

  /* Pastels de sens (DA) */
  --pastel-lime: #D7F25C;
  --pastel-lilas: #C9BDFF;
  --pastel-orange: #FF8A5B;
  --pastel-menthe: #BFE9E0;
  --pastel-lilas-clair: #E4DEFF;
  --pastel-orange-clair: #FFE3D6;
  --pastel-sable-fonce: #E4E0D6;

  --color-status-info: #5B3FE6;
  --color-status-success: #3E6B12;
  --color-status-warning: #B8420F;
  --color-status-danger: #B3261E;
  --color-status-neutral: #5C5A52;

  --font-sans: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 14px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  --shadow-card: none;
  --shadow-float: 0 12px 40px rgba(27, 26, 23, 0.16);

  --header-height: 72px;
  --max-width: 1180px;
}

/* Palette sombre — dupliquée dans les deux blocs ci-dessous (système + forcé),
   garder les deux synchronisés. Les pastels restent identiques : ils ressortent
   encore mieux sur fond sombre. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --color-bg-top: #121211;
    --color-bg: #121211;
    --color-surface: #1D1C1A;
    --color-surface-hollow: #272624;
    --color-border: rgba(255, 255, 255, 0.10);
    --color-border-soft: rgba(255, 255, 255, 0.06);
    --color-text: #F3F1EA;
    --color-text-muted: #A19E94;
    --color-text-faint: #8D8A80;
  --surf-blanc: #1D1C1A;
    --surf-sable-clair: #242321;
    --surf-sable: #2A2926;
    --surf-creux: #34332F;
    --txt-encre: #F3F1EA;
    --txt-neutre: #F3F1EA;

    --color-accent: #8B73FF;
    --color-accent-hover: #A18FFF;
    --color-accent-light: rgba(139, 115, 255, 0.2);
    --color-accent-contrast: #121211;

    --color-ink: #F3F1EA;
    --color-ink-contrast: #121211;

    --color-status-info: #B9A8FF;
    --color-status-success: #D7F25C;
    --color-status-warning: #FFA47F;
    --color-status-danger: #FF8C84;
    --color-status-neutral: #A19E94;

    --shadow-card: none;
    --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.5);
  }
}

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

  --color-bg-top: #121211;
  --color-bg: #121211;
  --color-surface: #1D1C1A;
  --color-surface-hollow: #272624;
  --color-border: rgba(255, 255, 255, 0.10);
  --color-border-soft: rgba(255, 255, 255, 0.06);
  --color-text: #F3F1EA;
  --color-text-muted: #A19E94;
  --color-text-faint: #8D8A80;
  --surf-blanc: #1D1C1A;
  --surf-sable-clair: #242321;
  --surf-sable: #2A2926;
  --surf-creux: #34332F;
  --txt-encre: #F3F1EA;
  --txt-neutre: #F3F1EA;

  --color-accent: #8B73FF;
  --color-accent-hover: #A18FFF;
  --color-accent-light: rgba(139, 115, 255, 0.2);
  --color-accent-contrast: #121211;

  --color-ink: #F3F1EA;
  --color-ink-contrast: #121211;

  --color-status-info: #B9A8FF;
  --color-status-success: #D7F25C;
  --color-status-warning: #FFA47F;
  --color-status-danger: #FF8C84;
  --color-status-neutral: #A19E94;

  --shadow-card: none;
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.5);
}