/* ==========================================================================
   Design tokens: the only place colors, type, radii and spacing are defined.
   Light is the default; html[data-theme="dark"] overrides the semantic colors.
   ========================================================================== */
:root {
    color-scheme: light;

    /* brand (from the ramDevX mark) */
    --cyan: #22d3ee;
    --blue: #3b82f6;
    --violet: #8b5cf6;
    --brand-gradient: linear-gradient(110deg, var(--cyan), var(--blue) 48%, var(--violet));

    /* surfaces */
    --paper: #f6f8fd;
    --paper-2: #eef2fb;
    --surface: #ffffff;
    --surface-2: #f1f4fb;
    --panel: #0b1230;          /* dark panels: product block, footer */
    --panel-2: #121c42;

    /* text */
    --ink: #0b1230;
    --ink-2: #2a3454;
    --muted: #586280;
    --on-panel: #e8edfb;
    --muted-on-panel: #a3aed0;

    /* lines */
    --line: #e1e7f3;
    --line-strong: #cbd4ea;

    /* action + status */
    --primary: #2f5fe8;
    --primary-hover: #2450cf;
    --on-primary: #ffffff;
    --primary-soft: #e8eeff;
    --success: #0b8a64;
    --success-soft: #e3f6ee;
    --warn: #a85a12;
    --warn-soft: #fff0df;
    --danger: #c42f35;
    --danger-soft: #fdeced;
    --whatsapp: #128c4a;

    /* type */
    --font-display: "Bricolage Grotesque", "Cairo", system-ui, sans-serif;
    --font-body: "Inter", "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    /* shape + depth */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 20px;
    --radius-xl: 32px;
    --shadow-sm: 0 1px 2px rgba(11, 18, 48, .06), 0 1px 3px rgba(11, 18, 48, .05);
    --shadow-lg: 0 40px 80px -32px rgba(11, 18, 48, .38), 0 12px 24px -12px rgba(11, 18, 48, .16);
    --ring: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);

    /* layout */
    --container: 1180px;
    --gutter: clamp(16px, 4vw, 32px);
    --header-h: 68px;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

html[data-theme="dark"] {
    color-scheme: dark;

    --paper: #070c1e;
    --paper-2: #0a1128;
    --surface: #0e1530;
    --surface-2: #131c3b;
    --panel: #0e1634;
    --panel-2: #16214a;

    --ink: #e8edfb;
    --ink-2: #c3cbe4;
    --muted: #98a3c4;

    --line: #1c2748;
    --line-strong: #2b3865;

    --primary: #7b97ff;
    --primary-hover: #94acff;
    --on-primary: #060b1f;
    --primary-soft: rgba(123, 151, 255, .14);
    --success: #4fd1a1;
    --success-soft: rgba(79, 209, 161, .13);
    --warn: #f0a35f;
    --warn-soft: rgba(240, 163, 95, .14);
    --danger: #ff7b80;
    --danger-soft: rgba(255, 123, 128, .12);
    --whatsapp: #25d366;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-lg: 0 40px 80px -32px rgba(0, 0, 0, .8), 0 12px 24px -12px rgba(0, 0, 0, .5);
}