:root {
    color-scheme: light;

    /* Primitive color palette */
    --blue-50: #f0f6ff;
    --blue-100: #e1edff;
    --blue-200: #c5dcff;
    --blue-300: #9ec3ff;
    --blue-400: #6fa3f5;
    --blue-500: #397fdb;
    --blue-600: #2868bd;
    --blue-700: #23549a;
    --blue-800: #21477d;
    --blue-900: #203d67;
    --slate-0: #ffffff;
    --slate-25: #fbfcfe;
    --slate-50: #f6f8fb;
    --slate-100: #eef2f7;
    --slate-200: #dde4ed;
    --slate-300: #c7d0dc;
    --slate-400: #909dad;
    --slate-500: #647388;
    --slate-600: #4c596b;
    --slate-700: #354154;
    --slate-800: #222d3d;
    --slate-850: #192331;
    --slate-900: #111a26;
    --slate-950: #0b121c;
    --red-50: #fff1f2;
    --red-100: #ffe1e4;
    --red-500: #dc4c5b;
    --red-600: #c23748;
    --amber-50: #fff8e6;
    --amber-100: #ffedbd;
    --amber-500: #c98717;
    --amber-600: #a96810;
    --green-50: #edf9f2;
    --green-100: #d7f1e1;
    --green-500: #299866;
    --green-600: #207b53;
    --cyan-500: #208da6;

    /* Semantic color contract: light is the product default */
    --bg: var(--slate-50);
    --panel: var(--slate-0);
    --panel-2: var(--slate-50);
    --surface: var(--slate-0);
    --surface-raised: var(--slate-0);
    --surface-subtle: var(--slate-100);
    --surface-muted: #e9eef5;
    --input-bg: var(--slate-0);
    --line: var(--slate-200);
    --border: var(--line);
    --line-strong: var(--slate-300);
    --text: var(--slate-900);
    --text-soft: var(--slate-700);
    --muted: var(--slate-500);
    --muted-strong: var(--slate-600);
    --primary: var(--blue-600);
    --brand: var(--primary);
    --primary-hover: var(--blue-700);
    --primary-active: var(--blue-800);
    --primary-ink: #ffffff;
    --primary-subtle: var(--blue-50);
    --primary-soft: var(--blue-100);
    --danger: var(--red-500);
    --danger-hover: var(--red-600);
    --danger-subtle: var(--red-50);
    --danger-text: #a92f40;
    --warn: var(--amber-500);
    --warning: var(--warn);
    --warn-subtle: var(--amber-50);
    --warn-text: #87560b;
    --success: var(--green-500);
    --ok: var(--success);
    --success-subtle: var(--green-50);
    --success-text: #176543;
    --info: var(--cyan-500);
    --info-subtle: #ebf8fb;
    --focus-ring: color-mix(in srgb, var(--primary) 34%, transparent);
    --overlay: rgba(15, 23, 42, 0.48);

    /* WhatsApp simulation colors stay independent from the app theme */
    --wa-bg: #0b141a;
    --wa-surface: #1f2c34;
    --wa-bubble-out: #005c4b;
    --wa-bubble-in: #1f2c34;
    --wa-text: #e9edef;
    --wa-muted: #aebac1;
    --wa-accent: #25d366;

    /* 4px spacing system */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --sp-1: var(--space-1);
    --sp-2: var(--space-2);
    --sp-3: var(--space-3);
    --sp-4: var(--space-4);
    --sp-5: var(--space-5);
    --sp-6: var(--space-6);
    --sp-8: var(--space-8);

    /* Type scale */
    --font: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-md: 0.875rem;
    --fs-lg: 1rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 1.875rem;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    /* Shape, elevation and motion */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-pill: 999px;
    --radius: var(--radius-lg);
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 12px 30px rgba(15, 23, 42, 0.09);
    --shadow-lg: 0 24px 64px rgba(15, 23, 42, 0.16);
    --shadow: var(--shadow-sm);
    --duration-fast: 140ms;
    --duration-normal: 200ms;
    --ease-standard: cubic-bezier(.2, .7, .2, 1);

    /* Component and layout sizing */
    --control-sm: 32px;
    --control-md: 40px;
    --control-lg: 44px;
    --tap: var(--control-md);
    --sidebar-w: 264px;
    --sidebar-collapsed: 76px;
    --page-max: 1680px;
    --z-base: 0;
    --z-sticky: 20;
    --z-sidebar: 40;
    --z-drawer: 60;
    --z-modal: 80;
    --z-toast: 1000;
}