/* QueCare palette — from Figma "Design Guidelines / Colors". Use these names in new styles.
   Yellow is a fill (with navy/black text on it), never a text colour on white (1.4:1). */
:root {
    /* Primary: Yellow. Buttons and highlights use Yellow 300 (#FAEF61), as on quecaresolutions.com */
    --qc-yellow: #FAEF61;
    --qc-yellow-400: #FADC4A;
    --qc-yellow-600: #C9B03B;
    --qc-yellow-300: #FAEF61;
    --qc-yellow-200: #FFF7A8;
    --qc-yellow-100: #FFFCDB;
    --qc-logo-yellow: #FFCF03;
    /* Secondary: Blue (700 is the navy of headers, side menus and the TV) */
    --qc-navy: #0B0B48;
    --qc-blue-600: #1D1D88;
    --qc-blue-500: #2626A3;
    --qc-blue: #3747B0;
    --qc-blue-300: #4F73C0;
    --qc-blue-200: #90A9E2;
    --qc-blue-100: #D9E2F9;
    --qc-blue-50: #EDF2FF;
    --qc-blue-25: #F5F4F6;
    /* State (success darkened from #4CAF50 so white text on it is readable) */
    --qc-error: #C91433;
    --qc-error-light: #FAE7EB;
    --qc-success: #2E7D32;
    --qc-success-brand: #4CAF50;
    --qc-success-light: #EDF7EE;
    /* Warnings: orange (not in the Figma palette; amber would look like brand yellow) */
    --qc-warning: #F97316;
    --qc-warning-ink: #9A3412;
    --qc-warning-light: #FFEDD5;
    /* Neutral */
    --qc-black: #000000;
    --qc-dark-grey: #454545;
    --qc-grey: #808080;
    --qc-light-silver: #F0F0F0;
    --qc-white: #FFFFFF;
    --qc-background: #F8F8F5;
    --qc-text-3: #6B6B85; /* lighter secondary text (hints, empty values) */
    /* From the website theme (quecaresolutions.com) */
    --qc-ink: #0B0B48;
    --qc-ink-muted: #4A4A6A;
    --qc-line: #D4D4C8;
    --qc-muted: #E8E8E0;
    --qc-radius: 12px;
    --qc-radius-lg: 24px;
    --qc-font: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* QueCare logo (Figma "Icon / Logo", the app's splash and sign-in): the Q mark with the name in Pacifico, navy.
   Stacked (mark above the name): sign-in, register, splash. Horizontal (mark then name): top bars and menus.
   Light backgrounds use /brand/quecare-icon.svg and navy text; navy backgrounds use /brand/quecare-icon-light.svg and white text.
   Full rules: docs/BRAND.md */
@font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/pacifico-latin.woff2') format('woff2'); }
.qc-wordmark { font-family: 'Pacifico', cursive; font-weight: 400; letter-spacing: 0; color: inherit; }

/* The QueCare header used on the landing, login and register pages: logo above the name, then the tagline */
.qc-brand-head { text-align: center; }
.qc-brand-head .qc-brand-logo { margin: 0 auto 4px; width: 64px; height: 64px; background: none; }
.qc-brand-head .qc-brand-logo img { width: 64px; height: 64px; }
.qc-brand-head .qc-brand-name { margin: 0; font-family: 'Pacifico', cursive; font-size: 30px; font-weight: 400; line-height: 1.3; letter-spacing: 0; color: var(--qc-navy); }
.qc-brand-head .qc-brand-tag { margin: 6px 0 0; font-size: 15px; color: var(--qc-ink-muted); opacity: 1; }
.qc-brand-head.qc-brand-lg .qc-brand-logo { width: 96px; height: 96px; margin-bottom: 8px; }
.qc-brand-head.qc-brand-lg .qc-brand-logo img { width: 96px; height: 96px; }
.qc-brand-head.qc-brand-lg .qc-brand-name { font-size: 44px; }
.qc-brand-head.qc-brand-lg .qc-brand-tag { font-size: 19px; color: var(--qc-navy); }