/* =========================================================
   Le Réseau Réno — Design tokens
   Source: app/static/styles.css + logo_couleur.png
   Brand: navy + neutral grey, dual-theme (dark default, light)
   ========================================================= */

/* -----------------------------------------------------------
   Web fonts — Inter, self-hosted woff2 in /fonts/.
   Source: https://rsms.me/inter/ (SIL OFL 1.1).
   Weights bundled: 400 / 500 / 600 / 700 / 800.
   ----------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/Inter-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/Inter-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/static/fonts/Inter-ExtraBold.woff2") format("woff2");
}

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

  /* --- Surfaces & lines (dark, default) ---------------- */
  --bg:           #0f172a;   /* page background          */
  --surface:      #0b1220;   /* sidebars, header strips  */
  --panel:        #111827;   /* cards, inputs            */
  --panel-soft:   #1f2937;   /* hovered/inset blocks     */
  --line:         #374151;   /* hairline borders         */
  --surface-hover:#1f2937;

  /* --- Foreground -------------------------------------- */
  --text:         #e5e7eb;
  --muted:        #9ca6b1;

  /* --- Accent (the brand call-to-action color) --------- *
   * In dark mode the accent is the neutral grey — primary
   * buttons read as "neutral chip" rather than navy. The
   * navy is reserved for the logo + light-mode CTA.       */
  --accent:        #9ca6b1;
  --accent-muted:  #7a8490;
  --accent-fg:     #0b1220;

  /* --- Overlays / shadow ------------------------------- */
  --overlay:      rgba(3, 8, 20, 0.55);
  --shadow:       rgba(2, 6, 23, 0.45);

  /* --- Avatars ----------------------------------------- */
  --avatar-user:    #334155;
  --avatar-user-fg: var(--text);

  /* --- Semantic ---------------------------------------- */
  --danger:                #c24141;
  --star-empty:            #5f6368;
  --star-fill:             #fbbc04;
  --badge-pending-fg:      #fcd34d;
  --badge-pending-border:  #b45309;
  --badge-rejected-fg:     #fca5a5;
  --badge-rejected-border: #b91c1c;
}

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

  --bg:           #eef2f6;
  --surface:      #ffffff;
  --panel:        #f8fafc;
  --panel-soft:   #e8edf2;
  --line:         rgba(33, 61, 88, 0.32);
  --surface-hover:#e2e8f0;

  --text:         #0f172a;
  --muted:        #213d58;

  /* In light mode, accent = brand navy. This is the same
     navy used in the logo (#213d58). Primary buttons fill
     navy and use white text. */
  --accent:        #213d58;
  --accent-muted:  #9ca6b1;
  --accent-fg:     #ffffff;

  --overlay:      rgba(33, 61, 88, 0.25);
  --shadow:       rgba(33, 61, 88, 0.12);

  --avatar-user:    #9ca6b1;
  --avatar-user-fg: #0f172a;

  --danger:                #b91c1c;
  --star-empty:            rgba(33, 61, 88, 0.35);
  --star-fill:             #d97706;
  --badge-pending-fg:      #b45309;
  --badge-pending-border:  #b45309;
  --badge-rejected-fg:     #b91c1c;
  --badge-rejected-border: #dc2626;
}

/* -----------------------------------------------------------
   Brand palette (canonical hex values, independent of theme)
   Use these when you need a stable swatch (illustrations,
   marketing pages, charts).
   ----------------------------------------------------------- */
:root {
  --brand-navy:        #213d58;  /* logo + light CTA       */
  --brand-navy-deep:   #14253a;  /* hover state of navy    */
  --brand-navy-ink:    #0f172a;  /* near-black for body    */
  --brand-grey:        #9ca6b1;  /* dark-mode accent       */
  --brand-grey-soft:   #c9d1d9;  /* dividers on hero       */
  --brand-paper:       #eef2f6;  /* warm-cool page wash    */
  --brand-paper-soft:  #f8fafc;
  --brand-white:       #ffffff;

  /* Quebec construction accent — used very sparingly for
     CTAs on the marketing page (think safety-vest amber). */
  --brand-amber:       #f5a524;
  --brand-amber-deep:  #d97706;

  /* Status / data colors (lifted from chat star + badges) */
  --status-star:       #fbbc04;
  --status-success:    #16a34a;
  --status-warning:    #d97706;
  --status-danger:     #c24141;
}

/* -----------------------------------------------------------
   Spacing scale (4-px base — read from existing padding/gap
   values in styles.css: 4, 6, 8, 10, 12, 14, 16, 20, 24, 28)
   ----------------------------------------------------------- */
:root {
  --space-1:  4px;
  --space-2:  6px;
  --space-3:  8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 20px;
  --space-9: 24px;
  --space-10:28px;
  --space-12:40px;
  --space-16:64px;
}

/* -----------------------------------------------------------
   Radii — observed values: 6 (avatar chip), 8 (small tab),
   10 (button/input), 12 (card), 999 (pill).
   ----------------------------------------------------------- */
:root {
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:  10px;
  --radius-lg:  12px;
  --radius-pill: 999px;
}

/* -----------------------------------------------------------
   Elevation — single soft shadow + a focus ring.
   ----------------------------------------------------------- */
:root {
  --shadow-card:    0 12px 28px var(--shadow);
  --shadow-popover: 0 8px 20px var(--shadow);
  --ring-focus:     0 0 0 2px var(--accent);
}

/* -----------------------------------------------------------
   Typography
   Live app uses one stack everywhere, varies weight + size.
   ----------------------------------------------------------- */
:root {
  --font-sans: Inter, "Segoe UI", Arial, sans-serif;
  --font-numeric-features: "tnum" 1, "cv11" 1; /* tabular nums on for prices */

  /* Type scale — observed in app:
     11 (kpi label) · 12 (meta/muted) · 13 (form label) ·
     14 (md-card title) · 15 (reco card heading) · 16 (admin h3) ·
     18 (kpi number) · then marketing headings (28/40/56) */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  14px;
  --text-lg:  15px;
  --text-xl:  16px;
  --text-2xl: 20px;
  --text-3xl: 28px;
  --text-4xl: 40px;
  --text-5xl: 56px;

  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-body:  1.5;
}

/* -----------------------------------------------------------
   Semantic type roles (use these in components, not the
   raw size tokens, to keep the system consistent).
   ----------------------------------------------------------- */
.h-hero,
h1.h-hero {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(36px, 5vw, var(--text-5xl));
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}

.h-display {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  color: var(--text);
}

.h-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--text);
}

.h-section {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--text);
}

.h-card {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--text);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text);
}

.t-meta,
.muted {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--muted);
}

.t-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.t-price {
  font-family: var(--font-sans);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
}