/*
 * Shared branding design tokens for the onboarding surfaces:
 *   - the signup wizard (legacy/signup-pro*, styled by account_signup.css)
 *   - the login page (login.css)
 *   - the in-app account-setup dialog (reuses account_signup.css)
 *
 * SINGLE SOURCE OF TRUTH — change a value here and all three update.
 *   - account_signup.css @imports this file; css-loader inlines it into the built
 *     account_signup.css bundle AND production.css (the dialog), so no <link> is
 *     needed on the signup pages or in the app.
 *   - login.css is a raw static file (not webpack-built), so login_template.html
 *     <link>s this file directly (served from optassets like login.css itself).
 *
 * Values follow Marketing's font-style mapping (Sora for headings/labels/buttons,
 * IBM Plex Sans for body, IBM Plex Serif for quotes). Per-element font sizes live
 * in each stylesheet's rules — only the shared tokens are defined here.
 */
:root {
    /* Brand palette */
    --color-primary: #1285ff;
    --color-primary-light: #4da3ff;
    --color-primary-dark: #0a6dd6;
    --color-text-dark: #181819;
    --color-text-medium: #5a5a5b;
    --color-text-muted: #888889;
    --color-border-light: #e8e9ea;
    --color-bg-subtle: #f8fafc;

    /* Elevation / motion (primary CTA buttons) */
    --shadow-primary: 0 4px 14px #1285ff59;
    --shadow-primary-hover: 0 6px 20px #1285ff73;
    --transition-base: 200ms ease;

    /* Form-input treatment */
    --op-input-radius: 8px;
    --op-input-border: 1.5px solid var(--color-border-light);
    --op-input-focus-ring: 0 0 0 3px rgba(18, 133, 255, 0.1);

    /* Type ramp fonts */
    --font-heading: 'Sora', sans-serif;
    --font-body: 'IBM Plex Sans', sans-serif;
    --font-serif: 'IBM Plex Serif', serif;
}