/* Sunday Systems v2 | 09-11-2026. Color and size primitives are shared by print and UI. */
@font-face {font-family:'Nunito Sans';src:url('../fonts/NunitoSans-Variable.ttf') format('truetype');font-weight:200 1000;font-style:normal;font-display:swap;}
:root {
  --ss-teal: #084C52;
  --ss-teal-ink: #04363B;
  --ss-coral: #F47F6B;
  --ss-cream: #F7F2E9;
  --ss-sky: #8CB4CC;
  --ss-white: #FFFFFF;
  --ss-teal-50: #EFF5F4;
  --ss-teal-100: #DCEAE8;
  --ss-teal-200: #B9D5D1;
  --ss-teal-300: #8BB5B0;
  --ss-teal-400: #5C918D;
  --ss-teal-500: #367572;
  --ss-teal-600: #235F60;
  --ss-teal-700: #084C52;
  --ss-teal-800: #063B40;
  --ss-teal-900: #042B2F;
  --ss-text-primary: #084C52;
  --ss-text-secondary: #235F60;
  --ss-border: #B9D5D1;
  --ss-control-border: #367572;
  --ss-surface: #F7F2E9;
  --ss-surface-subtle: #EFF5F4;
  --ss-disabled-bg: #DCEAE8;
  --ss-disabled-text: #235F60;
  --ss-success: #276749;
  --ss-warning: #855600;
  --ss-error: #A32F3F;
  --ss-live: #FFFFFF;
  --ss-success-bg: #EAF2EC;
  --ss-warning-bg: #FFF0CC;
  --ss-error-bg: #F9E8EA;
  --ss-live-bg: #063B40;
  --ss-type-display: 3.5rem;
  --ss-weight-display: 900;
  --ss-leading-display: 1.1;
  --ss-type-h1: 2.75rem;
  --ss-weight-h1: 900;
  --ss-leading-h1: 1.15;
  --ss-type-h2: 2rem;
  --ss-weight-h2: 900;
  --ss-leading-h2: 1.2;
  --ss-type-h3: 1.5rem;
  --ss-weight-h3: 700;
  --ss-leading-h3: 1.3;
  --ss-type-body: 1.125rem;
  --ss-weight-body: 400;
  --ss-leading-body: 1.5;
  --ss-type-small: 1rem;
  --ss-weight-small: 400;
  --ss-leading-small: 1.5;
  --ss-type-label: 1.125rem;
  --ss-weight-label: 700;
  --ss-leading-label: 1.3;
  --ss-space-1: 4px;
  --ss-space-2: 8px;
  --ss-space-4: 16px;
  --ss-space-6: 24px;
  --ss-space-8: 32px;
  --ss-space-12: 48px;
  --ss-space-16: 64px;
  --ss-font: 'Outfit','Nunito Sans',Arial,sans-serif;
  --ss-radius: 16px;
  --ss-radius-sm: 8px;
  --ss-radius-lg: 16px;
  --ss-container: 1200px;
  --ss-container-reading: 720px;
  --ss-container-form: 560px;
  --ss-print-body: 12pt;
  --ss-print-small: 11pt;
  --ss-target-min: 48px;
  --ss-primary-label: 20px;
  --ss-primary-hover: #FC9784;
  --ss-focus: #084C52;
}

/* Cream/white surfaces. Coral and sky are brand accents, never status colors.
   Teal on coral 3.74:1: labels MUST be 20px/700 or larger. Teal on sky 4.39:1:
   use for large display text only. Body text is teal on cream or white.
   Small means secondary metadata only. Never shrink instructions below 18px.
   Dark theme is reserved, not implemented. Do not reuse light-mode status colors there. */
.ss-surface {background:var(--ss-surface);color:var(--ss-text-primary);font:400 var(--ss-type-body)/1.5 var(--ss-font);}
.ss-container {max-width:var(--ss-container);margin-inline:auto;padding-inline:24px;}
.ss-secondary-text {color:var(--ss-text-secondary);}
.ss-button {font-family:var(--ss-font);min-height:48px;padding:12px 24px;border-radius:16px;cursor:pointer;}
.ss-button-primary {background:var(--ss-coral);color:var(--ss-teal);border:2px solid var(--ss-teal);font-size:20px;font-weight:700;line-height:1.3;}
.ss-button-primary:hover {background:var(--ss-primary-hover);}
.ss-button-secondary {background:transparent;color:var(--ss-teal);border:2px solid var(--ss-teal);font-size:18px;font-weight:700;}
.ss-link {color:var(--ss-teal);text-decoration:underline;text-underline-offset:3px;}
.ss-button:focus-visible,.ss-link:focus-visible,input:focus-visible {outline:3px solid var(--ss-focus);outline-offset:4px;}
.ss-button:disabled {background:var(--ss-disabled-bg);color:var(--ss-disabled-text);border-color:var(--ss-disabled-text);cursor:not-allowed;}
.ss-input {font:400 18px/1.5 var(--ss-font);color:var(--ss-text-primary);background:white;border:2px solid var(--ss-control-border);border-radius:8px;padding:12px;min-height:48px;box-sizing:border-box;}
.ss-status {font-weight:700;padding:8px 12px;border-radius:8px;display:inline-block;}
.ss-success {color:var(--ss-success);background:var(--ss-success-bg);}
.ss-warning {color:var(--ss-warning);background:var(--ss-warning-bg);}
.ss-error {color:var(--ss-error);background:var(--ss-error-bg);}
.ss-live {color:var(--ss-live);background:var(--ss-live-bg);}
@media(max-width:640px) {:root {--ss-type-display:2.5rem;--ss-type-h1:2rem;} .ss-container {padding-inline:16px;}}
@media print {.ss-surface {font-size:12pt;} .ss-secondary-text {font-size:11pt;}}
