/*
 * Omega design system — token layer for the planner app.
 *
 * A trimmed copy of the website's tokens.css (Omegals.Website.Legacy), kept to the
 * primitives this app consumes. Values must stay byte-identical to the website's so
 * the two products read as one brand. TOKENS ONLY — component rules live in
 * mobius-design.css or in the owning component's .razor.css.
 */

:root {
    /* Brand */
    --omega-teal-50: #F2F9F8;
    --omega-teal-100: #ECF7F6;
    --omega-teal-200: #D6E9E6;
    --omega-teal-400: #5C9B94;
    --omega-teal-600: #307B74;
    --omega-teal-700: #286760;
    --omega-teal-800: #245B55;
    --omega-teal-900: #1B4541;
    --omega-teal-rgb: 48, 123, 116;

    --omega-navy-800: #0E2B56;
    --omega-navy-rgb: 14, 43, 86;

    --omega-coral-50: #FEF1EB;
    --omega-coral-200: #FFD4C7;
    --omega-coral-500: #FE7D58;
    --omega-coral-600: #F16D48;
    --omega-coral-700: #DB5D3B;
    --omega-coral-ink: #A8391B;

    /* Ink, surfaces, borders */
    --omega-ink: #030911;
    --omega-text: #333333;
    --omega-text-muted: #626B76;
    --omega-text-on-inverse: #FFFFFF;
    --omega-text-on-dark: rgba(255, 255, 255, 0.88);

    --omega-surface-page: #FFFFFF;
    --omega-surface-neutral: #F2F4F7;
    --omega-surface-mint: #ECF7F6;
    --omega-surface-peach: #FEF1EB;
    /* The app's working surface: panels sit on this, not on stark white. */
    --omega-surface-subtle: #F7F9FB;

    --omega-border: #E6EAF0;

    /* Status — one set for the whole product. */
    --omega-success-ink: #16764A;
    --omega-success-bg: #E9F8F0;
    --omega-warning-ink: #A65B00;
    --omega-warning-bg: #FFF3DF;
    --omega-danger-ink: #B42318;
    --omega-danger-bg: #FFF0EE;
    --omega-info-ink: #0E2B56;
    --omega-info-bg: #F2F4F7;

    /* Typography */
    --omega-font-body: "Roboto", "Segoe UI", Arial, sans-serif;
    --omega-font-heading: "Raleway", "Roboto", "Segoe UI", Arial, sans-serif;

    --omega-text-h3: 1.55rem;
    --omega-text-h4: 1.125rem;
    --omega-text-subheading: 1.35rem;
    --omega-text-body: 1rem;
    --omega-text-small: 0.875rem;
    --omega-text-eyebrow: 0.75rem;

    --omega-leading-heading: 1.16;
    --omega-leading-body: 1.65;

    /* Spacing */
    --omega-space-1: 0.25rem;
    --omega-space-2: 0.5rem;
    --omega-space-3: 0.75rem;
    --omega-space-4: 1rem;
    --omega-space-5: 1.25rem;
    --omega-space-6: 1.5rem;
    --omega-space-7: 2rem;
    --omega-space-8: 2.5rem;

    /* Radius */
    --omega-radius-xs: 4px;
    --omega-radius-sm: 8px;
    --omega-radius-md: 12px;
    --omega-radius-lg: 20px;
    --omega-radius-pill: 999px;

    /* Elevation */
    --omega-shadow-card: 0 12px 30px rgba(14, 43, 86, 0.05);
    --omega-shadow-soft: 0 10px 30px rgba(14, 43, 86, 0.04);
    --omega-shadow-menu: 5px 3px 46px rgba(0, 0, 0, 0.07);
    --omega-shadow-panel: 0 10px 30px rgba(25, 35, 51, 0.07);

    /* Motion */
    --omega-duration-fast: 140ms;
    --omega-duration-base: 200ms;

    /* Focus — one ring for the whole app. */
    --omega-focus-ring-width: 3px;
    --omega-focus-ring-offset: 2px;
    --omega-focus-ring-color: var(--omega-navy-800);

    /* Layout */
    --omega-header-height: 65px;

    /* Semantic aliases the component layer consumes (same mapping as the style guide). */
    --omega-color-primary: var(--omega-teal-600);
    --omega-color-primary-rgb: var(--omega-teal-rgb);
    --omega-color-primary-dark: var(--omega-navy-800);
    --omega-color-accent: var(--omega-coral-500);
    --omega-color-text: var(--omega-text);
    --omega-color-text-muted: var(--omega-text-muted);
    --omega-color-border-soft: var(--omega-border);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --omega-duration-fast: 1ms;
        --omega-duration-base: 1ms;
    }
}