/*
 * jobplanr design system — Material Design 3 tokens
 * Generated from Material Theme Builder export 2026-05-05 (seed #01326D)
 * Light scheme applied by default at :root; dark via .dark class.
 * Import this file in every Django HTML template for consistent color tokens.
 * Contains ONLY CSS custom properties — no layout, no resets.
 */

/* ── M3 system color tokens — light scheme ───────────────────────── */
:root {
  --md-sys-color-primary: rgb(67 94 145);
  --md-sys-color-surface-tint: rgb(67 94 145);
  --md-sys-color-on-primary: rgb(255 255 255);
  --md-sys-color-primary-container: rgb(215 226 255);
  --md-sys-color-on-primary-container: rgb(42 70 119);
  --md-sys-color-secondary: rgb(142 77 46);
  --md-sys-color-on-secondary: rgb(255 255 255);
  --md-sys-color-secondary-container: rgb(255 219 204);
  --md-sys-color-on-secondary-container: rgb(113 54 25);
  --md-sys-color-tertiary: rgb(14 107 88);
  --md-sys-color-on-tertiary: rgb(255 255 255);
  --md-sys-color-tertiary-container: rgb(162 242 218);
  --md-sys-color-on-tertiary-container: rgb(0 81 66);
  --md-sys-color-error: rgb(140 74 95);
  --md-sys-color-on-error: rgb(255 255 255);
  --md-sys-color-error-container: rgb(255 217 226);
  --md-sys-color-on-error-container: rgb(112 51 71);
  --md-sys-color-background: rgb(249 249 255);
  --md-sys-color-on-background: rgb(26 27 32);
  --md-sys-color-surface: rgb(245 250 251);
  --md-sys-color-on-surface: rgb(23 29 30);
  --md-sys-color-surface-variant: rgb(231 227 208);
  --md-sys-color-on-surface-variant: rgb(73 71 58);
  --md-sys-color-outline: rgb(122 119 104);
  --md-sys-color-outline-variant: rgb(203 199 181);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(43 49 51);
  --md-sys-color-inverse-on-surface: rgb(236 242 243);
  --md-sys-color-inverse-primary: rgb(172 199 255);
  --md-sys-color-primary-fixed: rgb(215 226 255);
  --md-sys-color-on-primary-fixed: rgb(0 26 64);
  --md-sys-color-primary-fixed-dim: rgb(172 199 255);
  --md-sys-color-on-primary-fixed-variant: rgb(42 70 119);
  --md-sys-color-secondary-fixed: rgb(255 219 204);
  --md-sys-color-on-secondary-fixed: rgb(53 16 0);
  --md-sys-color-secondary-fixed-dim: rgb(255 182 149);
  --md-sys-color-on-secondary-fixed-variant: rgb(113 54 25);
  --md-sys-color-tertiary-fixed: rgb(162 242 218);
  --md-sys-color-on-tertiary-fixed: rgb(0 32 25);
  --md-sys-color-tertiary-fixed-dim: rgb(134 214 190);
  --md-sys-color-on-tertiary-fixed-variant: rgb(0 81 66);
  --md-sys-color-surface-dim: rgb(213 219 220);
  --md-sys-color-surface-bright: rgb(245 250 251);
  --md-sys-color-surface-container-lowest: rgb(255 255 255);
  --md-sys-color-surface-container-low: rgb(239 245 246);
  --md-sys-color-surface-container: rgb(233 239 240);
  --md-sys-color-surface-container-high: rgb(227 233 234);
  --md-sys-color-surface-container-highest: rgb(222 227 229);
  --md-extended-color-chip-a-color: rgb(116 91 11);
  --md-extended-color-chip-a-on-color: rgb(255 255 255);
  --md-extended-color-chip-a-color-container: rgb(255 223 146);
  --md-extended-color-chip-a-on-color-container: rgb(89 68 0);

  /* ═══════════════════════════════════════════════════════════════ */
  /* Semantic design tokens  — used by Django templates             */
  /* ═══════════════════════════════════════════════════════════════ */

  /* Brand — masthead, nav backgrounds (M3 primary seed / palette-15) */
  --color-primary:     #01326D;
  /* Gradient mid-stop — M3 primary main (light scheme primary) */
  --color-primary-mid: #435E91;
  /* Brand mid-tone — Figma "simple jobplanr palette/brand/h50";
     used for muted body copy on white cards over the brand background. */
  --color-brand-h50:   #6784A7;
  /* Orange CTA / hover — M3 secondary seed */
  --color-secondary:   #F47635;
  /* Yellow highlight — M3 chip_a */
  --color-accent:      #FFC800;
  /* Page background — M3 background */
  --color-bg:          #F9F9FF;
  /* Primary light — replaces the old light-blue surface */
  --color-surface:     #6F91D1;
  /* Body text — M3 on-background */
  --color-text:        #1A1B20;
  /* Error / destructive — M3 error */
  --color-danger:      #8C4A5F;
  /* Inline link / emphasis on dark surfaces — Figma
     "simple jobplanr palette/accent-orange/deep/full". */
  --color-link-emphasis: #C84F4B;
  /* Light text on the dark brand background — Figma
     "simple jobplanr palette/accent-gray/deep/h05". */
  --color-text-on-dark:  #F8F8F8;
  /* Email/contact accent on dark backgrounds — Figma "support" link tone. */
  --color-accent-yellow: #DBCE8B;
  /* Hover accent for the LOGIN button — Figma
     "simple jobplanr palette/accent-blue/base/full". */
  --color-accent-cyan:   #7AF1FF;
  /* White card surface — Figma "simple jobplanr palette/neutral/brand white". */
  --color-card-bg:       #FFFFFF;

  /* ── Shadows used on the dark brand surfaces ─────────────────────── */
  --shadow-header-rule:  0 2px 3px 0 rgba(255, 255, 255, 0.25);
  --shadow-button-glow:  0 0 8px 2px rgba(255, 255, 255, 0.25);

  /* Header/footer gradient */
  --gradient-masthead: linear-gradient(
    165.95deg,
    #01326D 21.301%,
    #01326D 50.035%,
    #435E91 87.709%
  );

  /* ── Typography ─────────────────────────────────────────────────── */
  --font-primary: 'Montserrat', sans-serif;

  /* ── Spacing (4 px base unit) ───────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;

  /* ── Border radius ──────────────────────────────────────────────── */
  --radius-card:   12px;
  --radius-button: 8px;
  --radius-pill:   9999px;

  /* ── Layout constants ───────────────────────────────────────────── */
  --header-height: 72px;
  --footer-height: 48px;
  --nav-width:     90px;
}

/* ── M3 system color tokens — dark scheme ────────────────────────── */
.dark {
  --md-sys-color-primary: rgb(172 199 255);
  --md-sys-color-surface-tint: rgb(172 199 255);
  --md-sys-color-on-primary: rgb(14 47 96);
  --md-sys-color-primary-container: rgb(42 70 119);
  --md-sys-color-on-primary-container: rgb(215 226 255);
  --md-sys-color-secondary: rgb(255 182 149);
  --md-sys-color-on-secondary: rgb(84 33 5);
  --md-sys-color-secondary-container: rgb(113 54 25);
  --md-sys-color-on-secondary-container: rgb(255 219 204);
  --md-sys-color-tertiary: rgb(134 214 190);
  --md-sys-color-on-tertiary: rgb(0 56 45);
  --md-sys-color-tertiary-container: rgb(0 81 66);
  --md-sys-color-on-tertiary-container: rgb(162 242 218);
  --md-sys-color-error: rgb(255 177 198);
  --md-sys-color-on-error: rgb(85 29 49);
  --md-sys-color-error-container: rgb(112 51 71);
  --md-sys-color-on-error-container: rgb(255 217 226);
  --md-sys-color-background: rgb(17 19 24);
  --md-sys-color-on-background: rgb(226 226 233);
  --md-sys-color-surface: rgb(14 20 21);
  --md-sys-color-on-surface: rgb(222 227 229);
  --md-sys-color-surface-variant: rgb(73 71 58);
  --md-sys-color-on-surface-variant: rgb(203 199 181);
  --md-sys-color-outline: rgb(148 145 129);
  --md-sys-color-outline-variant: rgb(73 71 58);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(222 227 229);
  --md-sys-color-inverse-on-surface: rgb(43 49 51);
  --md-sys-color-inverse-primary: rgb(67 94 145);
  --md-sys-color-primary-fixed: rgb(215 226 255);
  --md-sys-color-on-primary-fixed: rgb(0 26 64);
  --md-sys-color-primary-fixed-dim: rgb(172 199 255);
  --md-sys-color-on-primary-fixed-variant: rgb(42 70 119);
  --md-sys-color-secondary-fixed: rgb(255 219 204);
  --md-sys-color-on-secondary-fixed: rgb(53 16 0);
  --md-sys-color-secondary-fixed-dim: rgb(255 182 149);
  --md-sys-color-on-secondary-fixed-variant: rgb(113 54 25);
  --md-sys-color-tertiary-fixed: rgb(162 242 218);
  --md-sys-color-on-tertiary-fixed: rgb(0 32 25);
  --md-sys-color-tertiary-fixed-dim: rgb(134 214 190);
  --md-sys-color-on-tertiary-fixed-variant: rgb(0 81 66);
  --md-sys-color-surface-dim: rgb(14 20 21);
  --md-sys-color-surface-bright: rgb(52 58 59);
  --md-sys-color-surface-container-lowest: rgb(9 15 16);
  --md-sys-color-surface-container-low: rgb(23 29 30);
  --md-sys-color-surface-container: rgb(27 33 34);
  --md-sys-color-surface-container-high: rgb(37 43 44);
  --md-sys-color-surface-container-highest: rgb(48 54 55);
  --md-extended-color-chip-a-color: rgb(229 195 108);
  --md-extended-color-chip-a-on-color: rgb(62 46 0);
  --md-extended-color-chip-a-color-container: rgb(89 68 0);
  --md-extended-color-chip-a-on-color-container: rgb(255 223 146);
}