/* ============================================================================
   CRB Construction Design Tokens — single source of truth
   Source: extracted from official CRB logo (red #F5012D + dark forest #334132)
   Logo: /icons/crb-logo.png — keep these in sync.
   ============================================================================ */

:root {
  /* ---------------------------------------------------------------------------
     Colors — CRB Construction brand palette
     - Primary  : signature red (CTAs, accents, danger-ish moments)
     - Secondary: dark forest (text on light, anchor surfaces, sidebar)
     - Surfaces : clean whites, light grays
     --------------------------------------------------------------------------- */
  --color-bg:              #F7F6F4;   /* warm off-white, gentler than pure white */
  --color-surface:         #FFFFFF;
  --color-surface-2:       #F1EFEC;   /* hover / subtle alt — warm gray-beige */
  --color-bg-subtle:       #F1EFEC;   /* alias used by login + punch */
  --color-bg-hover:        #E5E2DD;
  --color-primary:         #D22B3D;   /* CRB red — exact value sampled from logo */
  --color-primary-hover:   #B91D2E;
  --color-primary-soft:    #FBE3E6;   /* badges, focus rings */
  --color-secondary:       #334132;   /* CRB dark forest — wordmark + house silhouette */
  --color-secondary-hover: #232E22;
  --color-secondary-soft:  #DDE2DC;
  --color-text:            #1A1F1A;   /* near-black with a tiny green tint */
  --color-text-muted:      #6B7568;   /* warm gray-green */
  --color-text-on-primary: #FFFFFF;
  --color-muted:           #6B7568;
  --color-border:          #E0DDD8;
  --color-border-strong:   #C9C5BE;
  --color-success:         #2F8F4C;   /* slightly muted to harmonize with forest */
  --color-success-soft:    #DDEEDF;
  --color-warning:         #C9931A;
  --color-warning-soft:    #FBF1D4;
  --color-danger:          #D22B3D;   /* same as primary — CRB red doubles as danger */
  --color-danger-soft:     #FBE3E6;
  --color-info:            #2F6F9F;
  --color-info-soft:       #DFEAF2;

  /* Status — chantiers (vert/jaune/rouge) */
  --status-ok:          var(--color-success);
  --status-warn:        var(--color-warning);
  --status-bad:         var(--color-danger);

  /* ---------------------------------------------------------------------------
     Spacing — scale 4px
     --------------------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* ---------------------------------------------------------------------------
     Radius
     --------------------------------------------------------------------------- */
  --radius-sm:    4px;
  --radius:       6px;     /* standard */
  --radius-md:    8px;
  --radius-lg:    12px;    /* cards */
  --radius-xl:    16px;
  --radius-full:  9999px;

  /* ---------------------------------------------------------------------------
     Shadow — subtle, multi-layer
     --------------------------------------------------------------------------- */
  --shadow-1:  0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-2:  0 2px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-3:  0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-4:  0 8px 24px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.06);
  --shadow-focus: 0 0 0 3px rgba(210, 43, 61, 0.20); /* CRB red focus ring */

  /* ---------------------------------------------------------------------------
     Typography — Inter, fluid scale utopia.fyi style
     Body 16px desktop / 15px mobile (clamp handles)
     --------------------------------------------------------------------------- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, 'Cascadia Code', Consolas, monospace;

  /* Fluid step ratio ~1.2 — calibrated for 320 → 1280 viewport */
  --fs--2: clamp(0.694rem, 0.687rem + 0.04vw, 0.720rem); /* fine print */
  --fs--1: clamp(0.833rem, 0.812rem + 0.11vw, 0.900rem); /* small */
  --fs-0:  clamp(0.938rem, 0.892rem + 0.23vw, 1.000rem); /* body 15→16px */
  --fs-1:  clamp(1.125rem, 1.054rem + 0.36vw, 1.250rem); /* lead / h6 */
  --fs-2:  clamp(1.350rem, 1.241rem + 0.55vw, 1.563rem); /* h5 */
  --fs-3:  clamp(1.620rem, 1.453rem + 0.84vw, 1.953rem); /* h4 */
  --fs-4:  clamp(1.944rem, 1.694rem + 1.25vw, 2.441rem); /* h3 */
  --fs-5:  clamp(2.333rem, 1.967rem + 1.83vw, 3.052rem); /* h2 */
  --fs-6:  clamp(2.800rem, 2.275rem + 2.62vw, 3.815rem); /* h1 */

  --lh-tight:   1.15;
  --lh-snug:    1.30;
  --lh-normal:  1.50;
  --lh-loose:   1.70;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;

  /* ---------------------------------------------------------------------------
     Layout
     --------------------------------------------------------------------------- */
  --sidebar-w:       240px;
  --bottom-nav-h:    64px;
  --topbar-h:        56px;
  --content-max:     1280px;
  --content-pad-x:   var(--space-5);
  --bp-md:           768px;   /* desktop breakpoint */
  --bp-lg:           1024px;
  --bp-xl:           1280px;

  /* ---------------------------------------------------------------------------
     Motion
     --------------------------------------------------------------------------- */
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --duration-fast:  100ms;
  --duration:       150ms;
  --duration-slow:  300ms;

  /* ---------------------------------------------------------------------------
     Z-index scale
     --------------------------------------------------------------------------- */
  --z-base:       1;
  --z-elevated:   10;
  --z-sticky:     100;
  --z-overlay:    1000;
  --z-modal:      1100;
  --z-toast:      1200;
  --z-tooltip:    1300;
}

/* ============================================================================
   Dark mode — opt-in via system preference (matches sobre construction palette)
   ============================================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:              #1A1F1A;   /* dark forest base, matches secondary */
    --color-surface:         #232E22;
    --color-surface-2:       #2C3A2B;
    --color-bg-subtle:       #2C3A2B;
    --color-bg-hover:        #384637;
    --color-primary:         #E63D4F;   /* slightly lifted CRB red for dark bg contrast */
    --color-primary-hover:   #F5012D;
    --color-primary-soft:    #5A1A22;
    --color-secondary:       #B0BCAE;   /* light forest for text on dark */
    --color-secondary-hover: #C8D2C7;
    --color-secondary-soft:  #3F4F40;
    --color-text:            #F1F0EC;
    --color-text-muted:      #A4B0A4;
    --color-text-on-primary: #FFFFFF;
    --color-muted:           #A4B0A4;
    --color-border:          #3F4F40;
    --color-border-strong:   #5A6B5C;
    --color-success:         #4CC57A;
    --color-success-soft:    #1F3F2A;
    --color-warning:         #EFB94C;
    --color-warning-soft:    #4A3717;
    --color-danger:          #F66577;
    --color-danger-soft:     #5A1A22;
    --color-info:            #5BA4D6;
    --color-info-soft:       #15364F;

    --shadow-1:  0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-2:  0 2px 4px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-3:  0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-4:  0 8px 24px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.30);
    --shadow-focus: 0 0 0 3px rgba(230, 61, 79, 0.35);
  }
}

/* ============================================================================
   Reduced motion
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}