/* Palette, elevation, radius, type and spacing — everything else reads these. */
:root{
  /* Brand */
  --primary-color:      #8B2635;
  --primary-color-dark: #6E1D2A;
  --primary-tint:       rgba(139, 38, 53, 0.09);
  --primary-border:     rgba(139, 38, 53, 0.28);
  --primary-glow:       0 0 0 3px rgba(139, 38, 53, 0.12);
  --primary-color-soft: #9C2E2E;
  --header-color:       #C0392B;
  --header-color-dark:  #9E2C1F;
  --accent-color:       #4C8C86;
  --accent-color-dark:  #3C6F6A;

  /* On a brand-coloured surface — the sidebar, the mobile header, the login
     screen. White at three opacities and text at three weights is the whole
     hierarchy those surfaces have: none of the greys above are legible on them,
     and a literal rgba(255,255,255,...) in a component file is how that scale
     ends up with eleven steps nobody chose. */
  --on-brand-text-muted: rgba(255, 255, 255, .78);
  --on-brand-text-faint: rgba(255, 255, 255, .55);
  --on-brand-fill-1:     rgba(255, 255, 255, .10);
  --on-brand-fill-2:     rgba(255, 255, 255, .16);
  --on-brand-fill-3:     rgba(255, 255, 255, .24);
  --backdrop:            rgba(20, 10, 10, .45);

  /* Text */
  --text-color:         #2A2E33;
  --text-secondary:     #6B7280;
  --text-muted:         #9AA1A8;
  --text-on-brand:      #FFFFFF;

  /* Surfaces */
  --bg-color:           #EEF0F2;
  --bg-alt:             #E4E7EA;
  --bg-card:            #FFFFFF;
  --bg-input:           #FCFCFD;
  --bg-input-focus:     #FFFFFF;
  --bg-hover:           #EEF0F2;

  /* Lines */
  --border-color:        #DBE0E4;
  --border-color-strong: #C7CDD3;
  --border-focus:        var(--primary-color);

  /* Status — active / pending / inactive / deleted */
  --status-completed:  #2F6F5C;
  --status-processing: #96600D;
  --status-pending:    #6B7280;
  --status-failed:     #B3331F;

  /* Elevation and motion */
  --shadow-sm: 0 1px 2px rgba(20,20,30,.06), 0 1px 1px rgba(20,20,30,.04);
  --shadow-md: 0 4px 14px rgba(20,20,30,.08);
  --shadow-lg: 0 14px 34px rgba(20,20,30,.16);
  --shadow-brand: 0 6px 16px rgba(139,38,53,.32);
  --ease: cubic-bezier(.2,.7,.3,1);
  --transition: .15s var(--ease);
  --transition-slow: .24s var(--ease);

  /* Radii */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius:      10px;
  --radius-lg:   16px;
  --radius-pill: 20px;

  /* Type */
  --font: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Code", monospace;
  --fs-xxs: 10.5px;
  --fs-xs:  11.5px;
  --fs-sm:  12.5px;
  --fs-base: 13.5px;
  --fs-md:  15px;
  --fs-lg:  20px;
  --fs-xl:  24px;
  --fs-2xl: 28px;

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* Layout — three breakpoints used throughout static/css/pages/*.css:
     980px (nav switches from a persistent sidebar to an off-canvas one),
     780px (two-column layouts collapse to one), 560px (tightest mobile). */
  --mobile-header-height: 50px;
  --content-max: 1400px;
  --sidebar-width: 264px;
  --sidebar-width-mobile: min(300px, 84vw);
}