/*
 * MathRealm design tokens.
 * Source of truth: DESIGN.md (Figma-design-analysis, alpha).
 * Every --ds-* token below maps 1:1 to a DESIGN.md token.
 * Legacy runtime variables (--mr-*, --color-*, aliases, and the late
 * "surface" system in main.css) are remapped so the whole legacy cascade
 * inherits the DESIGN.md values in BOTH light and dark themes.
 * Load this file BEFORE styles/design-system.css and AFTER all page CSS.
 *
 * Dark theme note: DESIGN.md documents no dark mode ("Known Gaps"); per its
 * guidance the dark theme is built from {colors.inverse-canvas} (black),
 * {colors.inverse-ink} (white), {colors.on-inverse-soft} (translucent white)
 * and the navy color block as raised surface. Pastel block colors stay
 * unchanged in both themes — they are brand surfaces, not theme surfaces.
 */

:root {
    color-scheme: light;

    /* ---- colors (DESIGN.md front matter) ---- */
    --ds-primary: #000000;
    --ds-on-primary: #ffffff;
    --ds-ink: #000000;
    --ds-canvas: #ffffff;
    --ds-inverse-canvas: #000000;
    --ds-inverse-ink: #ffffff;
    --ds-on-inverse-soft: #ffffff;
    --ds-inverse-tint: rgba(255, 255, 255, 0.16);
    --ds-hairline: #e6e6e6;
    --ds-hairline-soft: #f1f1f1;
    --ds-surface-soft: #f7f7f5;
    --ds-block-lime: #dceeb1;
    --ds-block-lilac: #c5b0f4;
    --ds-block-cream: #f4ecd6;
    --ds-block-pink: #efd4d4;
    --ds-block-mint: #c8e6cd;
    --ds-block-coral: #f3c9b6;
    --ds-block-navy: #1f1d3d;
    --ds-accent-magenta: #ff3d8b;
    --ds-success: #1ea64a;
    --ds-overlay-scrim: rgba(0, 0, 0, 0.6);

    /* ---- typography ---- */
    /* figmaSans is proprietary; DESIGN.md substitutes: Inter / Geist.
     * System-font strategy (no self-hosted webfonts): Latin/numerals fall
     * through Inter -> system-ui; CJK is carried by the OS UI face
     * (PingFang SC on Apple, Microsoft YaHei on Windows, Noto Sans SC on
     * Linux/Android). figmaSans/Geist stay as forward-looking placeholders —
     * absent locally, the browser skips them. */
    --ds-font: "figmaSans", Inter, Geist, system-ui, -apple-system,
        "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
        helvetica, sans-serif;
    --ds-font-mono: "figmaMono", "JetBrains Mono", "Geist Mono", "SF Mono",
        Menlo, monospace;
    --ds-display-xl-size: 72px;
    --ds-display-lg-size: 54px;
    --ds-headline-size: 21px;
    --ds-card-title-size: 18px;
    --ds-body-lg-size: 16px;
    --ds-body-size: 14px;
    --ds-body-sm-size: 13px;
    --ds-button-size: 14px;
    --ds-eyebrow-size: 12px;
    --ds-caption-size: 11px;
    --ds-weight-body: 400;
    --ds-weight-body-sm: 400;
    --ds-weight-display: 680;
    --ds-weight-button: 600;
    --ds-weight-headline: 650;
    --ds-weight-card-title: 650;

    /* ---- unified application roles ----
     * These are the compact defaults shared by cards, actions, fields and
     * dense data lists. Page styles may change layout, not the component
     * geometry or type hierarchy. */
    --ds-ui-ink-muted: #686864;
    --ds-ui-ink-faint: #92928c;
    --ds-ui-control-height: 34px;
    --ds-ui-control-height-touch: 40px;
    --ds-ui-control-radius: 8px;
    --ds-ui-card-radius: 24px;
    --ds-ui-card-padding: 16px;
    --ds-ui-row-padding-block: 8px;
    --ds-ui-row-padding-inline: 12px;

    /* ---- rounded ---- */
    --ds-rounded-xs: 2px;
    --ds-rounded-sm: 6px;
    --ds-rounded-md: 8px;
    --ds-rounded-lg: 24px;
    --ds-rounded-xl: 32px;
    --ds-rounded-pill: 50px;
    --ds-rounded-full: 9999px;

    /* ---- spacing ---- */
    --ds-space-hair: 1px;
    --ds-space-xxs: 3px;
    --ds-space-xs: 6px;
    --ds-space-sm: 8px;
    --ds-space-md: 10px;
    --ds-space-lg: 14px;
    --ds-space-xl: 18px;
    --ds-space-xxl: 26px;
    --ds-space-section: 44px;

    /* ---- layout ---- */
    --ds-container: 1180px;

    /* ---- elevation (DESIGN.md levels 0-3) ---- */
    --ds-shadow-none: none;
    --ds-shadow-soft: none;
    --ds-shadow-modal: none;

    /* ---- motion (reveal animations undocumented; keep conservative) ---- */
    --ds-transition-fast: 150ms ease-out;
    --ds-transition: 200ms ease-out;

    /* ---- theme-scoped roles (flip in dark mode) ---- */
    --ds-t-canvas: var(--ds-canvas);
    --ds-t-surface: var(--ds-canvas);
    --ds-t-surface-soft: var(--ds-surface-soft);
    --ds-t-ink: var(--ds-ink);
    --ds-t-ink-body: var(--ds-ink);
    --ds-t-ink-muted: var(--ds-ui-ink-muted);
    --ds-t-ink-faint: var(--ds-ui-ink-faint);
    --ds-t-hairline: var(--ds-hairline);
    --ds-t-hairline-soft: var(--ds-hairline-soft);
    --ds-t-primary: var(--ds-primary);
    --ds-t-on-primary: var(--ds-on-primary);

    /* ================================================================
     * Legacy variable remap (light theme).
     * ================================================================ */

    /* --mr-* system layer (authority tail of main.css) */
    --mr-bg: var(--ds-t-canvas);
    --mr-bg-raised: var(--ds-t-surface);
    --mr-bg-subtle: var(--ds-t-surface-soft);
    --mr-bg-muted: var(--ds-t-surface-soft);
    --mr-text: var(--ds-t-ink);
    --mr-text-muted: var(--ds-t-ink);
    --mr-text-faint: var(--ds-t-ink);
    --mr-border: var(--ds-t-hairline);
    --mr-border-strong: var(--ds-t-ink);
    --mr-primary: var(--ds-t-primary);
    --mr-primary-hover: var(--ds-t-primary);
    --mr-focus: var(--ds-t-ink);
    --mr-success: var(--ds-success);
    --mr-warning: var(--ds-block-coral);
    --mr-danger: var(--ds-accent-magenta);
    --mr-info: var(--ds-block-lilac);
    --mr-accent: var(--ds-accent-magenta);
    --mr-radius: var(--ds-rounded-lg);
    --mr-radius-sm: var(--ds-rounded-md);
    --mr-radius-lg: var(--ds-rounded-lg);
    --mr-container: var(--ds-container);
    --mr-shadow-xs: none;
    --mr-shadow-sm: none;
    --mr-ring: 0 0 0 2px var(--ds-t-ink);
    --mr-font-body: var(--ds-font);
    --mr-font-display: var(--ds-font);
    --mr-font-mono: var(--ds-font-mono);
    --mr-rule: var(--ds-t-hairline);
    --mr-rule-soft: var(--ds-t-hairline-soft);
    --mr-double-rule: 1px solid var(--ds-t-hairline);

    /* --color-* semantic layer (variables.css) */
    --color-bg: var(--ds-t-canvas);
    --color-bg-secondary: var(--ds-t-canvas);
    --color-bg-tertiary: var(--ds-t-surface-soft);
    --color-surface: var(--ds-t-surface);
    --color-surface-strong: var(--ds-t-surface);
    --color-surface-muted: var(--ds-t-surface-soft);
    --color-text-primary: var(--ds-t-ink);
    --color-text-secondary: var(--ds-t-ink);
    --color-text-tertiary: var(--ds-t-ink);
    --color-border: var(--ds-t-hairline);
    --color-border-strong: var(--ds-t-ink);
    --color-accent: var(--ds-t-primary);
    --color-accent-hover: var(--ds-t-primary);
    --color-accent-secondary: var(--ds-block-lilac);
    --color-success: var(--ds-success);
    --color-warning: var(--ds-block-coral);
    --color-error: var(--ds-accent-magenta);

    /* Older aliases */
    --primary-color: var(--ds-t-primary);
    --secondary-color: var(--ds-t-canvas);
    --text-primary: var(--ds-t-ink);
    --text-secondary: var(--ds-t-ink);
    --border-color: var(--ds-t-hairline);
    --background-color: var(--ds-t-canvas);
    --card-background: var(--ds-t-surface);
    --input-background: var(--ds-t-surface);
    --input-border: var(--ds-t-hairline);
    --button-primary: var(--ds-t-primary);
    --button-primary-hover: var(--ds-t-primary);
    --success-color: var(--ds-success);
    --warning-color: var(--ds-block-coral);
    --danger-color: var(--ds-accent-magenta);
    --bg-gradient: none;
    --bg-gradient-mesh: none;

    --font-family: var(--ds-font);
    --font-family-display: var(--ds-font);
    --radius-sm: var(--ds-rounded-sm);
    --radius-md: var(--ds-rounded-md);
    --radius-lg: var(--ds-rounded-lg);
    --radius-xl: var(--ds-rounded-xl);
    --radius-pill: var(--ds-rounded-pill);
    --border-radius: var(--ds-rounded-md);

    --shadow-sm: none;
    --shadow-md: var(--ds-shadow-soft);
    --shadow-lg: var(--ds-shadow-modal);
    --shadow-focus: 0 0 0 2px var(--ds-t-ink);
    --backdrop-blur: none;
    --glass-saturate: none;
    --glass-border: 1px solid var(--ds-t-hairline);

    /* Late "surface" token system (tail of main.css) */
    --bg-base: var(--ds-t-canvas);
    --bg-gradient-1: transparent;
    --bg-gradient-2: transparent;
    --bg-gradient-3: transparent;
    --bg-blur-strength: 0px;
    --surface-bg: var(--ds-t-surface);
    --surface-bg-strong: var(--ds-t-surface);
    --surface-border: var(--ds-t-hairline);
    --surface-text: var(--ds-t-ink);
    --surface-muted: var(--ds-t-ink);
    --surface-shadow: none;
    --brand-accent: var(--ds-t-primary);
    --brand-accent-strong: var(--ds-t-primary);
    --brand-accent-soft: var(--ds-t-surface-soft);
    --brand-accent-hover: var(--ds-t-primary);
    --brand-accent-text: var(--ds-t-on-primary);
    --ui-radius: var(--ds-rounded-lg);
}

/*
 * Dark theme.
 * Built from {colors.inverse-canvas} / {colors.inverse-ink} /
 * {colors.on-inverse-soft}; navy block serves as the raised surface.
 * All theme-scoped --ds-t-* roles flip here, and every legacy variable
 * inherits the flip automatically.
 */
body.dark-mode,
body[data-theme="dark"],
[data-theme="dark"] body {
    color-scheme: dark;

    --ds-t-canvas: var(--ds-inverse-canvas);
    --ds-t-surface: #131313;
    --ds-t-surface-soft: rgba(255, 255, 255, 0.08);
    --ds-t-ink: var(--ds-inverse-ink);
    --ds-t-ink-body: var(--ds-inverse-ink);
    --ds-t-ink-muted: rgba(255, 255, 255, 0.68);
    --ds-t-ink-faint: rgba(255, 255, 255, 0.48);
    --ds-t-hairline: rgba(255, 255, 255, 0.18);
    --ds-t-hairline-soft: rgba(255, 255, 255, 0.10);
    /* Inverse primary: on black canvas the primary pill flips to white,
     * mirroring pricing-tab-selected "selected = primary surface". */
    --ds-t-primary: #ffffff;
    --ds-t-on-primary: #000000;

    /* Shadows read as darker halos on black canvas */
    --shadow-md: none;
    --shadow-lg: none;
    --ds-shadow-soft: none;
    --ds-shadow-modal: none;

    /* Legacy stylesheets redefine these custom properties under their own
     * `body.dark-mode` blocks; re-declare them here (this file loads later,
     * so these win the tie) to keep the whole legacy cascade on-system. */
    --mr-bg: var(--ds-t-canvas);
    --mr-bg-raised: var(--ds-t-surface);
    --mr-bg-subtle: var(--ds-t-surface-soft);
    --mr-bg-muted: var(--ds-t-surface-soft);
    --mr-text: var(--ds-t-ink);
    --mr-text-muted: var(--ds-t-ink);
    --mr-text-faint: var(--ds-t-ink);
    --mr-border: var(--ds-t-hairline);
    --mr-border-strong: var(--ds-t-ink);
    --mr-primary: var(--ds-t-primary);
    --mr-primary-hover: var(--ds-t-primary);
    --color-bg: var(--ds-t-canvas);
    --color-bg-secondary: var(--ds-t-canvas);
    --color-bg-tertiary: var(--ds-t-surface-soft);
    --color-surface: var(--ds-t-surface);
    --color-surface-strong: var(--ds-t-surface);
    --color-surface-muted: var(--ds-t-surface-soft);
    --color-text-primary: var(--ds-t-ink);
    --color-text-secondary: var(--ds-t-ink);
    --color-text-tertiary: var(--ds-t-ink);
    --color-border: var(--ds-t-hairline);
    --color-border-strong: var(--ds-t-ink);
    --color-accent: var(--ds-t-primary);
    --color-accent-hover: var(--ds-t-primary);
    --primary-color: var(--ds-t-primary);
    --secondary-color: var(--ds-t-canvas);
    --text-primary: var(--ds-t-ink);
    --text-secondary: var(--ds-t-ink);
    --border-color: var(--ds-t-hairline);
    --background-color: var(--ds-t-canvas);
    --card-background: var(--ds-t-surface);
    --input-background: var(--ds-t-surface);
    --input-border: var(--ds-t-hairline);
    --button-primary: var(--ds-t-primary);
    --button-primary-hover: var(--ds-t-primary);
    --bg-gradient: none;
    --bg-gradient-mesh: none;
    --bg-base: var(--ds-t-canvas);
    --bg-gradient-1: transparent;
    --bg-gradient-2: transparent;
    --bg-gradient-3: transparent;
    --bg-blur-strength: 0px;
    --surface-bg: var(--ds-t-surface);
    --surface-bg-strong: var(--ds-t-surface);
    --surface-border: var(--ds-t-hairline);
    --surface-text: var(--ds-t-ink);
    --surface-muted: var(--ds-t-ink);
    --surface-shadow: none;
    --brand-accent: var(--ds-t-primary);
    --brand-accent-strong: var(--ds-t-primary);
    --brand-accent-soft: var(--ds-t-surface-soft);
    --brand-accent-hover: var(--ds-t-primary);
    --brand-accent-text: var(--ds-t-on-primary);
    --glass-border: 1px solid var(--ds-t-hairline);
}