/* ============================================================================
 * Design tokens — copied from UI-UX-CONVENTIONS.md (the shared visual language).
 * Custom properties always carry a literal fallback at point of use.
 * ========================================================================== */
:root {
    /* ---- Brand ---- */
    --primary-blue:   #0F9FC4;  /* cyan — primary actions, active state, accents */
    --secondary-blue: #1F3D7C;  /* navy — headings, primary text, emphasis      */

    /* ---- Neutrals ----
     * Contrast pass (client feedback "hazy"): text tones darkened well past
     * the original conventions values; surfaces/borders unchanged. */
    --slate:          #55648A;  /* muted text, icons, secondary labels (was #808FAD) */
    --light-silver:   #E3E4E9;  /* borders, dividers, hairlines        */
    --off-white:      #F7F7F8;  /* app background / canvas             */
    --mid-grey:       #6E7686;  /* tertiary text (was #999999)         */
    --pale-cyan:      #EAF7FA;  /* tinted hover/active backgrounds     */
    --soft-cyan:      #C3E7F0;  /* subtle accent borders, chart tint  */

    /* ---- Semantic aliases (kept on-brand) ---- */
    --text-dark:    #0F1E45;    /* body + heading text = deep navy (was #1F3D7C) */
    --text-muted:   #55648A;    /* secondary text = darkened slate    */
    --cyan-ink:     #0A7A97;    /* cyan when used AS TEXT on light bg (readable) */
    --border-grey:  #E3E4E9;
    --success:      #0F9FC4;    /* success reads as cyan */
    --danger:       #1F3D7C;    /* danger reads as navy   */
    --logout-red:   #e05c5c;    /* the one true destructive red */

    /* ---- Layout ---- */
    --sidebar-width:     250px;
    --sidebar-collapsed: 60px;

    /* ---- Elevation (conventions §3) ---- */
    --shadow-card:  0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px var(--light-silver, #E3E4E9);
    --shadow-hover: 0 4px 12px rgba(15,159,196,0.12), 0 0 0 1px var(--soft-cyan, #C3E7F0);
    --shadow-float: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-menu:  0 10px 30px rgba(0,0,0,0.15);
    --shadow-modal: 0 20px 60px rgba(0,0,0,0.3);

    /* ---- Focus ring (the signature) ---- */
    --focus-ring: 0 0 0 3px rgba(15,159,196,0.15);

    /* ---- Radius ---- */
    --radius-card:   10px;
    --radius-btn:    8px;
    --radius-input:  6px;
    --radius-modal:  16px;

    /* ---- Domain accents (used by the data screens; still on-brand) ---- */
    --wa-required:   #ffe9c7;   /* water-analysis: required cell   */
    --wa-optional:   #eef6fb;   /* water-analysis: optional cell   */
    --wa-calc:       #eef0f3;   /* water-analysis: system-calc     */
    --recommend:     #EAF7FA;   /* system-recommended row (pale cyan) */
    --warn-cell:     #fbe3e3;   /* actual dose below recommended   */
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    font-family: 'Red Hat Display', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Global 1.2x type scale (client request): every size in the app is rem-based,
     * so scaling the root does it uniformly. 14px x 1.2 = 16.8px. */
    font-size: 16.8px;
    color: var(--text-dark, #0F1E45);
    background-color: var(--off-white, #F7F7F8);
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }