/* ==========================================================================
   Design Tokens — auxiliaire.co
   Single source of truth for colors, typography, spacing, sizes, and radii.

   Rule: literal hex / px / rem values are forbidden outside this file.
   New design values must be expressed as a new token here first.

   Limitation: CSS custom properties cannot be used inside @media at-rule
   conditions (e.g. `@media (max-width: var(--breakpoint))` does NOT work).
   For that reason, responsive breakpoint *literals* remain in the consuming
   files. The canonical values are documented under "Breakpoints" below.
   ========================================================================== */

:root {
  /* ---- Brand colors ---- */
  --color-primary:        #38407D;
  --color-primary-hover:  #2d3366;
  --color-primary-focus-ring: rgba(56, 64, 125, 0.15);
  --color-secondary:      #C8E2FC;
  --color-accent:         #FCD2BE;
  --color-accent-light:   rgba(252, 210, 190, 0.3);
  --color-coral:          #F98452;
  --color-coral-hover:    #e8733f;
  --color-white:          #ffffff;

  /* ---- Semantic colors ---- */
  --color-success:        #16a34a;
  --color-success-bg:     #dcfce7;
  --color-success-text:   #166534;
  --color-success-hover:  #047857;
  --color-warning:        #d97706;
  --color-warning-bg:     #fef3c7;
  --color-warning-text:   #92400e;
  --color-error:          #dc2626;
  --color-error-bg:       #fee2e2;
  --color-error-text:     #991b1b;
  --color-error-hover:    #b91c1c;
  --color-error-row-bg:   #fef2f2;
  --color-info:           #2563eb;
  --color-info-bg:        #dbeafe;
  --color-info-text:      #1e40af;
  --color-info-hover:     #1e3a8a;

  /* Status colors (running / cancelled) */
  --color-running-bg:     #e0e7ff;
  --color-running-text:   #3730a3;
  --color-cancelled-bg:   #f3f4f6;
  --color-cancelled-text: #6b7280;

  /* ---- Neutrals ---- */
  --color-text:           #1e293b;
  --color-text-secondary: #64748b;
  --color-text-muted:     #94a3b8;
  --color-border:         #e2e8f0;
  --color-border-strong:  #cbd5e1;
  --color-bg:             #f8fafc;
  --color-surface:        #ffffff;
  --color-surface-alt:    #f1f5f9;

  /* ---- On-primary (text/overlays on dark navy background) ---- */
  --color-on-primary:               #ffffff;
  --color-on-primary-strong:        rgba(255, 255, 255, 0.85);
  --color-on-primary-muted:         rgba(255, 255, 255, 0.7);
  --color-on-primary-overlay:       rgba(255, 255, 255, 0.15);
  --color-on-primary-overlay-faint: rgba(255, 255, 255, 0.10);

  /* ---- Third-party brand (Google sign-in button) ---- */
  --color-google-text:    #3c4043;

  /* ---- Typography ---- */
  --font-body:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Playfair Display", Georgia, serif;
  --font-mono:    "JetBrains Mono", "Fira Code", "Courier New", monospace;
  --font-google:  "Google Sans", Roboto, Arial, sans-serif;

  --text-2xs:  0.6875rem;   /* 11px - tiny labels (log levels, micro badges) */
  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 0.875rem;    /* 14px */
  --text-md:   0.9375rem;   /* 15px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.5rem;      /* 24px */
  --text-2xl:  1.75rem;     /* 28px */

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --tracking-google: 0.25px;

  /* ---- Spacing ---- */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */

  /* ---- Border widths ---- */
  --border-thin:    1px;
  --border-medium:  2px;
  --border-thick:   3px;

  /* ---- Border radius ---- */
  --radius-xs:   3px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-full: 9999px;

  /* ---- Outline (focus rings) ---- */
  --outline-width:  2px;
  --outline-offset: 2px;
  --focus-ring-thickness: 3px;

  /* ---- Shadows ---- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);

  /* ---- Layout ---- */
  --content-max-width: 1080px;
  --header-height:     56px;

  /* ---- Component sizes ---- */
  --size-logo-header:    28px;
  --size-logo-login:     36px;
  --size-google-btn:     40px;
  --size-sr-only:        1px;

  /* ---- Component max widths ---- */
  --width-login-card:    400px;
  --width-reject-input:  250px;
  --width-nav-dropdown-menu: 200px;
  --height-filter-options-max: 240px;
  --width-detail-panel-min: 320px;
  --width-constat-cell-max:  360px;
  --height-detail-panel-min: 240px;

  /* ---- Grid minimums ---- */
  --grid-min-cards:        280px;
  --grid-min-meta:         180px;
  --grid-min-stats:        140px;
  --grid-min-heatmap-cell:  72px;

  /* ---- Planning-audit chart sizes (US-012) ---- */
  --chart-bar-track-height:   12px;
  --chart-bar-label-min:     180px;
  --chart-bar-value-min:      48px;
  --chart-heatmap-cell-min:   54px;
  --chart-heatmap-cell-max:  120px;

  /* ---- Heatmap intensity scale (US-012) ---- */
  /* Five steps from "no data" to "heaviest week". Levels 1–4 ramp from
     the primary brand color at increasing opacities so the scale stays
     monochromatic-blue and accessible. Level 0 is the empty-week
     surface color (intentionally lighter than other zero-state cells so
     a week with zero anomalies still looks like a cell, not a gap). */
  --color-heatmap-level-0:  #eef2f7;
  --color-heatmap-level-1:  rgba(56, 64, 125, 0.20);
  --color-heatmap-level-2:  rgba(56, 64, 125, 0.40);
  --color-heatmap-level-3:  rgba(56, 64, 125, 0.65);
  --color-heatmap-level-4:  rgba(56, 64, 125, 0.90);
  --color-heatmap-text-on-dark: var(--color-on-primary);
  --color-heatmap-text-on-light: var(--color-text);

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
}

/* Breakpoints (documented; literals used in @media because CSS custom
   properties are not evaluated inside at-rule conditions):
     --breakpoint-sm:  640px
     --breakpoint-md:  768px
     --breakpoint-lg:  1024px
*/