/* Sunnyside design tokens: one source for the main site, the customer portal
   (/portal/) and the staff area (/portal/admin/).
   Wrapped in :where() so specificity is zero: a page stylesheet that sets one of
   these on purpose (e.g. a campaign page) still wins, and loading this file
   never changes how an existing page looks.
   Breakpoints (use these four only): 480px, 720px, 960px, 1200px. */
:where(:root) {
  /* brand: navy is the signature, sun yellow the one pop, teal (lagoon) a quiet accent */
  --navy-950: #071726;
  --navy-900: #0B2338;
  --navy-800: #10314C;
  --navy-700: #14456B;
  --sun:      #F5B31E;   /* fills and accents on dark grounds only */
  --sun-ink:  #8A5A00;   /* accent text on light grounds (5.93:1 on white) */
  --lagoon:   #0E6E7C;   /* teal accent: switches, ambient light, range zones */
  --citrus:   #F2762B;   /* notification dots and campaign fills only, never text */
  --sand:     #FFF6EB;

  /* surfaces and ink */
  --paper: #FFFFFF;
  --mist:  #F1F5F8;
  --ink:   #0B2338;
  --ink-2: #4A6379;
  --ink-3: #5D7183;     /* 5.05:1 on white, 4.61:1 on mist */
  --line:  #DCE5EC;

  /* on navy */
  --glass:      rgba(255,255,255,.06);
  --glass-2:    rgba(255,255,255,.10);
  --glass-line: rgba(255,255,255,.14);
  --on-dark-2:  rgba(255,255,255,.74);
  --on-dark-3:  rgba(255,255,255,.56);
  --solid-dark: #0B2338; /* solid backing for cards on navy: no glass behind text */

  /* status (always paired with a text label, never colour alone) */
  --ok-bg: #E3F4EA;   --ok-fg: #17663A;
  --warn-bg: #FDF1D6; --warn-fg: #7A5300; --warn-mark: #C98A00;
  --bad-bg: #FBE7E4;  --bad-fg: #A3271A;

  /* shape and elevation */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --sh-1: 0 1px 2px rgba(7,23,38,.06), 0 2px 8px rgba(7,23,38,.04);
  --sh-2: 0 2px 4px rgba(7,23,38,.06), 0 12px 28px -8px rgba(7,23,38,.12);
  --sh-3: 0 4px 8px rgba(7,23,38,.08), 0 32px 64px -16px rgba(7,23,38,.24);

  /* type and motion */
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.2,.7,.1,1);
}