/* ---------------------------------------------------------------------------
   Measured Ascent — design tokens.

   SINGLE SOURCE OF TRUTH for brand colours, radii and spacing. Loaded before
   style.css, so every other stylesheet may only reference these variables and
   must never hardcode a hex value.

   (Colours deliberately live here and not in .env: env vars can't reach CSS
   without a build step or inline styles, and inline styles fight the CSP.)
   --------------------------------------------------------------------------- */

:root {
    /* --- Core brand ------------------------------------------------------ */
    /* Dark panel used by the footer, transactional email header and the
       training plans section. */
    --ma-ink: #1a1a2e;
    --ma-ink-soft: #24243e;
    --ma-ink-line: rgba(255, 255, 255, 0.12);

    /* Teal accent — the "Ascent" half of the wordmark. */
    --ma-accent: #4fd1c5;
    --ma-accent-dark: #38b2ac;

    /* Text on dark surfaces. */
    --ma-on-dark: #ffffff;
    --ma-on-dark-muted: #b9bed1;
    --ma-on-dark-faint: #767c94;

    /* Text on light surfaces. */
    --ma-on-light: #1e293b;
    --ma-on-light-muted: #475569;
    --ma-on-light-faint: #64748b;
    --ma-border: #e2e8f0;
    --ma-surface: #ffffff;
    --ma-surface-alt: #f4f5f7;

    /* --- Semantic palette (Bootstrap overrides live in style.css) --------- */
    --brand-primary: #4f46e5;
    --brand-primary-dark: #4338ca;
    --brand-success: #16a34a;
    --brand-success-dark: #15803d;
    --brand-warning: #f59e0b;
    --brand-warning-dark: #d97706;
    --brand-danger: #e11d48;
    --brand-danger-dark: #be123c;
    --brand-secondary: #64748b;

    /* --- Surfaces & shape ------------------------------------------------ */
    --surface-muted: #f5f6fb;
    --text: var(--ma-on-light);
   --ma-container-max: 1100px;
   --ma-container-narrow: 760px;
   --ma-container-compact: 720px;

   --ma-shadow-nav: 0 1px 3px rgba(15, 23, 42, 0.08);
   --ma-shadow-card: 0 2px 10px rgba(15, 23, 42, 0.06);
   --ma-shadow-hover: 0 8px 24px rgba(15, 23, 42, 0.1);

   --ma-form-label: #4c4f7a;
   --ma-form-border: #ccd2f0;
   --ma-form-border-hover: #aeb8ec;
   --ma-form-focus: #7d89dd;
   --ma-form-bg: #fdfdff;
   --ma-readonly-bg: #eef1fb;
   --ma-readonly-text: #5f6685;
   --ma-readonly-border: #d3d9f2;
   --ma-help-bg: #f8faff;
   --ma-help-border: #d6ddf8;
   --ma-help-text: #4f5678;

   --ma-placeholder-start: #eef0f4;
   --ma-placeholder-end: #e2e6ec;
   --ma-user-icon-stroke: #1d2d50;
   --ma-log-bg: #1e2233;
   --ma-log-text: #d8dbe6;

    --radius: 0.75rem;
    --radius-lg: 1rem;
    --radius-pill: 999px;
}