/* Explain: Theme design tokens (colors, fonts) — single source of truth. */
:root {
    /* Core brand palette — Design Symmetry */
    --primary-color: #4bb2b1;
    --primary-hover: #37999a;
    --primary-tint: rgba(75, 178, 177, 0.12);
    --secondary-color: #58595b;
    --accent-color: #4bb2b1;

    /* Neutrals */
    --background-color: #ffffff;
    --surface-color: #f4f6f6;
    --surface-dark: #0e1112;
    --ink: #0a0b0b;
    --text-color: #121517;
    --text-muted: #6b7280;
    --text-on-dark: #f7f8f8;
    --text-on-dark-muted: #a8aeaf;
    --border-color: #e5e7e7;
    --border-dark: rgba(255, 255, 255, 0.14);

    /* Sister brand — Frost It Tint It */
    --frost-primary: #00669b;
    --frost-deep: #004a73;
    --frost-grey: #58595b;
    --frost-tint: rgba(0, 102, 155, 0.12);
    --frost-navy: #002e47;
    --frost-light: #7ec8ef;

    /* Typography */
    --font-heading: 'Space Grotesk', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Shape & depth */
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 28px;
    --shadow-soft: 0 18px 44px -22px rgba(10, 11, 11, 0.35);
    --shadow-card: 0 1px 2px rgba(16, 18, 20, 0.05), 0 22px 44px -34px rgba(16, 18, 20, 0.45);
}