:root {
    /* ===== BRAND COLORS ===== */
    --primary: #0f766e;
    --primary-dark: #115e59;
    --primary-soft: #ccfbf1;
    --accent: #38bdf8;
    --accent-soft: #e0f2fe;

    /* ===== SEMANTIC COLORS ===== */
    --success: #16a34a;
    --success-soft: #dcfce7;
    --warning: #d97706;
    --warning-soft: #fef3c7;
    --danger: #dc2626;
    --danger-soft: #fee2e2;
    --info: #0284c7;
    --info-soft: #e0f2fe;

    /* ===== TEXT ===== */
    --text-main: #0f172a;
    --text-muted: #64748b;
    --text-soft: #94a3b8;
    --text-inverse: #ffffff;

    /* ===== BACKGROUNDS ===== */
    --bg-page: #f8fafc;
    --bg-card: #ffffff;
    --bg-soft: #f1f5f9;
    --bg-muted: #f8fafc;

    /* ===== BORDERS ===== */
    --border-light: #e2e8f0;
    --border-mid: #cbd5e1;
    --border-strong: #94a3b8;

    /* ===== STATUS BAR ===== */
    --statusbar-bg: #111827;
    --statusbar-text: #ffffff;

    /* ===== NAV / FOOTER ===== */
    --navbar-bg: #0f766e;
    --navbar-bg-dark: #115e59;
    --footer-bg: #ffffff;

    /* ===== TYPOGRAPHY ===== */
    --font-main: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* ===== SHADOWS ===== */
    --shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 18px 45px rgba(15, 23, 42, 0.12);

    /* ===== RADIUS ===== */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    /* ===== SPACING ===== */
    --space-xs: 0.35rem;
    --space-sm: 0.6rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
}