/*
 * OMNISANT design tokens
 *
 * This file is the source of truth for shared color, spacing, radius,
 * shadow, typography, layout, and common component tokens. Page CSS can
 * still compose these values, but should avoid new hardcoded theme values.
 */

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

    /* Color: backgrounds */
    --omni-color-bg-base: #05070c;
    --omni-color-bg-soft: #090c13;
    --omni-color-bg-raised: #0f131d;
    --omni-color-bg-card: rgba(20, 24, 34, 0.82);
    --omni-color-bg-card-hover: rgba(28, 33, 46, 0.84);
    --omni-color-bg-inset: rgba(0, 0, 0, 0.18);
    --omni-color-bg-hero: linear-gradient(150deg, rgba(33, 38, 53, 0.84), rgba(15, 18, 27, 0.94) 58%, rgba(8, 10, 16, 0.96));
    --omni-color-bg-muted: rgba(13, 16, 24, 0.68);
    --omni-color-bg-empty: linear-gradient(145deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.010));

    /* Color: borders */
    --omni-color-border-subtle: rgba(255, 255, 255, 0.048);
    --omni-color-border-strong: rgba(255, 255, 255, 0.088);
    --omni-color-edge-light: rgba(255, 255, 255, 0.115);
    --omni-color-edge-warm: rgba(185, 162, 122, 0.24);

    /* Color: text */
    --omni-color-text-primary: #f4f1eb;
    --omni-color-text-secondary: #c4c9d6;
    --omni-color-text-muted: #8e97aa;
    --omni-color-text-disabled: rgba(196, 201, 214, 0.45);

    /* Color: accents */
    --omni-color-accent-primary: #7888c8;
    --omni-color-accent-hover: #8796d3;
    --omni-color-accent-soft: rgba(120, 136, 200, 0.145);
    --omni-color-accent-border: rgba(120, 136, 200, 0.28);
    --omni-color-accent-premium: #b9a27a;
    --omni-color-accent-premium-soft: rgba(185, 162, 122, 0.14);
    --omni-color-danger: #e46b5d;
    --omni-color-success: #81b99b;
    --omni-color-warning: #c4a66f;
    --omni-color-info: #8fa2e6;

    /* Spacing: canonical 4px/8px rhythm */
    --omni-space-0: 0;
    --omni-space-1: 0.25rem;
    --omni-space-2: 0.5rem;
    --omni-space-3: 0.75rem;
    --omni-space-4: 1rem;
    --omni-space-5: 1.25rem;
    --omni-space-6: 1.5rem;
    --omni-space-7: 1.75rem;
    --omni-space-8: 2rem;
    --omni-space-10: 2.5rem;
    --omni-space-12: 3rem;
    --omni-space-xs: var(--omni-space-2);
    --omni-space-sm: var(--omni-space-3);
    --omni-space-md: var(--omni-space-4);
    --omni-space-lg: var(--omni-space-6);
    --omni-space-xl: var(--omni-space-8);
    --omni-space-2xl: var(--omni-space-12);
    --omni-gap-field: var(--omni-space-3);
    --omni-gap-control: var(--omni-space-3);
    --omni-gap-card: var(--omni-space-5);
    --omni-gap-group: var(--omni-space-6);
    --omni-gap-section: var(--omni-space-8);
    --omni-gap-page: var(--omni-space-10);
    --omni-page-padding-desktop: clamp(2.5rem, 3vw, 3.5rem);
    --omni-page-padding-laptop: var(--omni-space-6);
    --omni-page-padding-tablet: 1.125rem;
    --omni-page-padding-mobile: var(--omni-space-4);

    /* Radius */
    --omni-radius-xs: 0.5rem;
    --omni-radius-sm: 0.75rem;
    --omni-radius-md: 1rem;
    --omni-radius-lg: 1.25rem;
    --omni-radius-xl: 1.5rem;
    --omni-radius-2xl: 1.75rem;
    --omni-radius-pill: 999px;
    --omni-radius-modal: 1.5rem;
    --omni-radius-card: 1.375rem;
    --omni-radius-control: var(--omni-radius-md);
    --omni-radius-icon: 0.875rem;
    --omni-radius-sheet: 1.25rem;

    /* Shadows */
    --omni-shadow-none: none;
    --omni-shadow-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    --omni-shadow-card: 0 18px 48px rgba(0, 0, 0, 0.30);
    --omni-shadow-card-hover: 0 22px 56px rgba(0, 0, 0, 0.34);
    --omni-shadow-elevated: 0 26px 70px rgba(0, 0, 0, 0.38);
    --omni-shadow-modal: 0 34px 96px rgba(0, 0, 0, 0.48);
    --omni-shadow-control: 0 10px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --omni-shadow-accent: 0 14px 34px rgba(125, 143, 216, 0.12);
    --omni-shadow-focus: 0 0 0 3px rgba(120, 136, 200, 0.20);
    --omni-shadow-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 -1px 0 rgba(0, 0, 0, 0.18);
    --omni-shadow-selected: 0 18px 42px rgba(0, 0, 0, 0.32), inset 2px 0 0 rgba(120, 136, 200, 0.58);
    --omni-skeleton-bg: linear-gradient(90deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.088), rgba(255, 255, 255, 0.045));
    --omni-skeleton-surface: linear-gradient(180deg, rgba(24, 29, 40, 0.78), rgba(12, 15, 23, 0.80));

    /* Typography */
    --omni-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --omni-heading-weight: 600;
    --omni-body-weight: 450;
    --omni-font-size-eyebrow: 0.68rem;
    --omni-font-size-caption: 0.78rem;
    --omni-font-size-body-sm: 0.88rem;
    --omni-font-size-body: 1rem;
    --omni-font-size-card-title: 1.08rem;
    --omni-font-size-section-title: clamp(1.25rem, 1.6vw, 1.55rem);
    --omni-font-size-page-title: clamp(2rem, 3vw, 2.65rem);
    --omni-font-weight-muted: 650;
    --omni-font-weight-strong: 750;
    --omni-letter-spacing-tight: 0.01em;
    --omni-letter-spacing-eyebrow: 0.18em;
    --omni-line-height-tight: 1.12;
    --omni-line-height-compact: 1.28;
    --omni-line-height-body: 1.55;
    --omni-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    --omni-motion-fast: 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --omni-motion-medium: 210ms cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Layout */
    --omni-sidebar-width-desktop: 20.5rem;
    --omni-topbar-height: 4.75rem;
    --omni-content-max-width: 1400px;
    --omni-content-max-width-regular: 1320px;
    --omni-content-max-width-dense: 1440px;
    --omni-content-max-width-editor: 1560px;
    --omni-card-min-height: 8rem;
    --omni-mobile-bottom-sheet-max-height: calc(100dvh - 5rem);
    --omni-mobile-topbar-h: 48px;
    --omni-mobile-householdbar-h: 0px;
    --omni-mobile-bottomnav-h: 50px;
    --omni-mobile-page-x: var(--omni-space-4);
    --omni-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --omni-mobile-shell-bottom-clearance: calc(var(--omni-mobile-bottomnav-h) + var(--omni-mobile-safe-bottom) + var(--omni-space-6));
    --omni-mobile-section-gap: var(--omni-space-3);
    --omni-mobile-card-gap: var(--omni-space-2);
    --omni-mobile-card-pad: var(--omni-space-3);
    --omni-mobile-toolbar-gap: var(--omni-space-2);
    --omni-mobile-control-h: 2.625rem;
    --omni-mobile-compact-control-h: 2.5rem;
    --omni-mobile-field-h: 3rem;
    --omni-mobile-control-radius: var(--omni-radius-sm);
    --omni-mobile-card-radius: var(--omni-radius-lg);
    --omni-mobile-section-radius: var(--omni-radius-xl);
    --omni-mobile-primary-radius: var(--omni-radius-2xl);
    --omni-mobile-panel-radius: var(--omni-radius-lg);
    --omni-mobile-sheet-radius: var(--omni-radius-xl);
    --omni-mobile-modal-footer-h: 4.625rem;
    --omni-mobile-content-w: 35rem;
    --omni-mobile-chip-height: 1.875rem;
    --omni-mobile-border: rgba(255, 255, 255, 0.075);
    --omni-mobile-border-strong: rgba(145, 160, 224, 0.26);
    --omni-mobile-surface: linear-gradient(180deg, rgba(22, 26, 36, 0.94), rgba(11, 14, 21, 0.92));
    --omni-mobile-surface-soft: rgba(17, 21, 30, 0.82);
    --omni-mobile-utility: linear-gradient(180deg, rgba(16, 20, 29, 0.90), rgba(8, 11, 17, 0.94));
    --omni-mobile-section: linear-gradient(180deg, rgba(22, 27, 39, 0.92), rgba(11, 15, 23, 0.96));
    --omni-mobile-primary: linear-gradient(180deg, rgba(27, 33, 48, 0.96), rgba(12, 16, 25, 0.98));
    --omni-mobile-field-bg: rgba(7, 9, 15, 0.72);
    --omni-mobile-field-bg-focus: rgba(10, 13, 22, 0.86);
    --omni-mobile-text: rgba(245, 246, 252, 0.92);
    --omni-mobile-muted: rgba(191, 198, 219, 0.68);
    --omni-mobile-shadow-1: 0 8px 22px rgba(0, 0, 0, 0.22);
    --omni-mobile-shadow-2: 0 16px 40px rgba(0, 0, 0, 0.32);
    --omni-mobile-shadow-3: 0 24px 60px rgba(0, 0, 0, 0.42);
    --omni-rail-control-h: var(--omni-control-height-md);
    --omni-rail-panel-border: rgba(198, 210, 255, 0.105);
    --omni-rail-surface: rgba(18, 21, 30, 0.72);
    --omni-rail-surface-soft: rgba(255, 255, 255, 0.04);
    --omni-schedule-control-h: var(--omni-control-height-md);
    --omni-schedule-grid-gap: var(--omni-space-3);
    --omni-schedule-control-bg: linear-gradient(180deg, rgba(21, 25, 35, 0.78), rgba(12, 15, 22, 0.82));
    --omni-schedule-cell-bg: linear-gradient(180deg, rgba(21, 25, 36, 0.78), rgba(10, 13, 20, 0.88));
    --omni-schedule-cell-border: rgba(255, 255, 255, 0.052);
    --omni-control-height-xs: 2rem;
    --omni-control-height-sm: 2.375rem;
    --omni-control-height-md: 2.75rem;
    --omni-control-height-lg: 3.25rem;
    --omni-control-height-xl: 3.75rem;
    --omni-touch-target-min: 2.75rem;
    --omni-list-row-height-sm: 3.5rem;
    --omni-list-row-height-md: 4.25rem;
    --omni-list-row-height-lg: 5.375rem;
    --omni-z-background: 0;
    --omni-z-content: 1;
    --omni-z-raised: 2;
    --omni-z-sticky: 20;
    --omni-z-topbar: 1000;
    --omni-z-sidebar: 1100;
    --omni-z-drawer: 1200;
    --omni-z-overlay: 1300;
    --omni-z-popover: 1400;
    --omni-z-modal: 1500;
    --omni-z-toast: 1600;
    --omni-z-debug: 1700;
    --omni-breakpoint-mobile-max: 767.98px;
    --omni-breakpoint-tablet-min: 768px;
    --omni-breakpoint-desktop-min: 1024px;
    --omni-breakpoint-wide-min: 1500px;
    --omni-breakpoint-ultrawide-min: 1900px;

    /* Visual orchestration: layout rails */
    --omni-content-narrow: 960px;
    --omni-content-form: 1180px;
    --omni-content-readable: 1480px;
    --omni-content-wide: 1680px;
    --omni-content-full: 1800px;
    --omni-content-rail-padding: clamp(24px, 3vw, 48px);

    /* Visual orchestration: section rhythm and density */
    --omni-rhythm-system-gap: 48px;
    --omni-rhythm-major-gap: 40px;
    --omni-rhythm-section-gap: 32px;
    --omni-rhythm-group-gap: 24px;
    --omni-rhythm-card-gap: 18px;
    --omni-rhythm-control-gap: 16px;
    --omni-rhythm-label-gap: 12px;
    --omni-density-card-compact: 18px;
    --omni-density-card-normal: 24px;
    --omni-density-card-operational: 20px;

    /* Visual orchestration: opacity hierarchy */
    --omni-opacity-primary: 0.92;
    --omni-opacity-secondary: 0.74;
    --omni-opacity-meta: 0.62;
    --omni-opacity-passive: 0.48;
    --omni-opacity-disabled: 0.40;

    /* Visual orchestration: card tiers */
    --omni-surface-tier-1: linear-gradient(180deg, rgba(19, 23, 32, 0.84), rgba(11, 14, 21, 0.88));
    --omni-surface-tier-2: linear-gradient(180deg, rgba(24, 29, 41, 0.90), rgba(13, 17, 26, 0.92));
    --omni-surface-tier-3: linear-gradient(180deg, rgba(31, 37, 52, 0.94), rgba(15, 19, 29, 0.96));
    --omni-border-tier-1: rgba(255, 255, 255, 0.048);
    --omni-border-tier-2: rgba(255, 255, 255, 0.068);
    --omni-border-tier-3: rgba(150, 166, 224, 0.18);
    --omni-shadow-tier-1: 0 12px 30px rgba(0, 0, 0, 0.20);
    --omni-shadow-tier-2: 0 18px 42px rgba(0, 0, 0, 0.28);
    --omni-shadow-tier-3: 0 24px 58px rgba(0, 0, 0, 0.36);

    /* Visual orchestration: glow tiers */
    --omni-glow-background: radial-gradient(circle at 48% -12%, rgba(84, 94, 130, 0.14), transparent 34rem);
    --omni-glow-ambient: 0 18px 54px rgba(88, 105, 175, 0.10);
    --omni-glow-active: 0 0 0 1px rgba(156, 170, 228, 0.24), 0 12px 30px rgba(88, 105, 175, 0.14);
    --omni-glow-focus: 0 0 0 3px rgba(141, 156, 219, 0.18);

    /* Visual orchestration: interaction and motion */
    --omni-ease-luxury: cubic-bezier(0.19, 1, 0.22, 1);
    --omni-ease-control: cubic-bezier(0.2, 0.8, 0.2, 1);
    --omni-motion-luxury-fast: 150ms var(--omni-ease-control);
    --omni-motion-luxury-standard: 210ms var(--omni-ease-luxury);
    --omni-motion-luxury-slow: 300ms var(--omni-ease-luxury);
    --omni-interaction-lift: -1px;
    --omni-interaction-lift-strong: -2px;

    /* Visual orchestration: button tiers */
    --omni-button-radius-machined: 14px;
    --omni-button-radius-compact: 12px;
    --omni-button-height-compact: 36px;
    --omni-button-height-standard: 40px;
    --omni-button-height-primary: 42px;
    --omni-button-primary-bg: linear-gradient(180deg, rgba(139, 153, 214, 0.92), rgba(111, 127, 193, 0.92));
    --omni-button-secondary-bg: rgba(255, 255, 255, 0.032);
    --omni-button-danger-bg: rgba(228, 107, 93, 0.060);

    /* Component aliases: cards */
    --omni-card-bg: var(--omni-color-bg-card);
    --omni-card-border: var(--omni-color-border-subtle);
    --omni-card-shadow: var(--omni-shadow-card);
    --omni-card-bg-hero: var(--omni-color-bg-hero);
    --omni-card-bg-muted: var(--omni-color-bg-muted);
    --omni-card-bg-empty: var(--omni-color-bg-empty);

    /* Component aliases: buttons */
    --omni-button-bg: linear-gradient(135deg, rgba(125, 143, 216, 0.94), rgba(102, 118, 184, 0.94));
    --omni-button-text: #080a0f;
    --omni-button-radius: var(--omni-radius-pill);
    --omni-button-height: var(--omni-control-height-md);

    /* Component aliases: inputs */
    --omni-input-bg: rgba(255, 255, 255, 0.045);
    --omni-input-text: var(--omni-color-text-primary);
    --omni-input-border: var(--omni-color-border-subtle);
    --omni-input-radius: var(--omni-radius-lg);
    --omni-input-height: var(--omni-control-height-md);

    /* Component aliases: dialogs */
    --omni-dialog-bg: rgba(17, 20, 30, 0.98);
    --omni-dialog-border: var(--omni-color-border-subtle);
    --omni-dialog-radius: var(--omni-radius-modal);
    --omni-dialog-shadow: var(--omni-shadow-modal);

    /* Component aliases: notifications */
    --omni-notification-bg: rgba(13, 17, 27, 0.96);
    --omni-notification-border: rgba(255, 255, 255, 0.105);
    --omni-notification-radius: var(--omni-radius-lg);
    --omni-notification-shadow: var(--omni-shadow-elevated);
    --omni-notification-success: var(--omni-color-success);
    --omni-notification-warning: var(--omni-color-warning);
    --omni-notification-error: var(--omni-color-danger);
    --omni-notification-info: var(--omni-color-info);

    /*
     * Compatibility aliases for existing OMNISANT and iOS-inspired CSS.
     * Keep these until older page styles are migrated to the token names above.
     */
    --omni-bg: var(--omni-color-bg-base);
    --omni-bg-soft: var(--omni-color-bg-soft);
    --omni-surface: var(--omni-color-bg-card);
    --omni-surface-2: rgba(31, 36, 50, 0.72);
    --omni-surface-hover: var(--omni-color-bg-card-hover);
    --omni-border: var(--omni-color-border-subtle);
    --omni-border-soft: rgba(255, 255, 255, 0.04);
    --omni-text: var(--omni-color-text-primary);
    --omni-text-soft: var(--omni-color-text-secondary);
    --omni-text-muted: var(--omni-color-text-muted);
    --omni-primary: var(--omni-color-accent-primary);
    --omni-primary-soft: var(--omni-color-accent-soft);
    --omni-primary-border: var(--omni-color-accent-border);
    --omni-champagne: var(--omni-color-accent-premium);
    --omni-champagne-soft: var(--omni-color-accent-premium-soft);
    --omni-champagne-border: rgba(185, 162, 122, 0.28);
    --omni-shadow-soft: var(--omni-shadow-card);
    --omni-shadow-glow: var(--omni-shadow-accent);

    --ios-bg: var(--omni-color-bg-base);
    --ios-bg-elevated: var(--omni-color-bg-soft);
    --ios-surface: var(--omni-color-bg-card);
    --ios-surface-strong: var(--omni-color-bg-raised);
    --ios-surface-muted: rgba(255, 255, 255, 0.035);
    --ios-border: var(--omni-color-border-subtle);
    --ios-border-strong: var(--omni-color-border-strong);
    --ios-text: var(--omni-color-text-primary);
    --ios-text-soft: var(--omni-color-text-secondary);
    --ios-muted: var(--omni-color-text-muted);
    --ios-primary: var(--omni-color-accent-primary);
    --ios-primary-soft: var(--omni-color-accent-soft);
    --ios-danger: var(--omni-color-danger);
    --ios-success: var(--omni-color-success);
    --ios-warning: var(--omni-color-warning);
    --ios-info: var(--omni-color-info);
    --ios-radius-sm: var(--omni-radius-sm);
    --ios-radius-md: var(--omni-radius-md);
    --ios-radius-lg: var(--omni-radius-lg);
    --ios-radius-xl: var(--omni-radius-xl);
    --ios-radius-pill: var(--omni-radius-pill);
    --ios-shadow-card: var(--omni-shadow-card);
    --ios-shadow-elevated: var(--omni-shadow-elevated);
    --ios-font: var(--omni-font-family);
}

[data-theme="light"] {
    color-scheme: light;
    --omni-color-bg-base: #f5f2ec;
    --omni-color-bg-soft: #ebe7df;
    --omni-color-bg-raised: #ffffff;
    --omni-color-bg-card: rgba(255, 255, 255, 0.88);
    --omni-color-bg-card-hover: rgba(255, 255, 255, 0.96);
    --omni-color-bg-inset: rgba(27, 31, 42, 0.055);
    --omni-color-border-subtle: rgba(20, 24, 34, 0.08);
    --omni-color-border-strong: rgba(20, 24, 34, 0.14);
    --omni-color-text-primary: #181a20;
    --omni-color-text-secondary: #485063;
    --omni-color-text-muted: #70788a;
    --omni-color-text-disabled: rgba(72, 80, 99, 0.45);
    --omni-color-accent-primary: #5669b8;
    --omni-color-accent-hover: #465ba7;
    --omni-color-accent-soft: rgba(86, 105, 184, 0.12);
    --omni-color-accent-border: rgba(86, 105, 184, 0.28);
    --omni-color-accent-premium: #92764b;
    --omni-color-accent-premium-soft: rgba(146, 118, 75, 0.12);
    --omni-color-danger: #ba463c;
    --omni-color-success: #34745b;
    --omni-color-warning: #8d6f35;
    --omni-color-info: #5669b8;
}

[data-theme="contrast"] {
    color-scheme: dark;
    --omni-color-bg-base: #000000;
    --omni-color-bg-soft: #05070c;
    --omni-color-bg-raised: #0b0f18;
    --omni-color-bg-card: #111827;
    --omni-color-bg-card-hover: #172033;
    --omni-color-bg-inset: #000000;
    --omni-color-border-subtle: rgba(255, 255, 255, 0.28);
    --omni-color-border-strong: rgba(255, 255, 255, 0.45);
    --omni-color-text-primary: #ffffff;
    --omni-color-text-secondary: #e7ecff;
    --omni-color-text-muted: #b7c0d8;
    --omni-color-text-disabled: rgba(231, 236, 255, 0.5);
    --omni-color-accent-primary: #9fb0ff;
    --omni-color-accent-hover: #c0cbff;
    --omni-color-accent-soft: rgba(159, 176, 255, 0.24);
    --omni-color-accent-border: rgba(159, 176, 255, 0.56);
    --omni-color-accent-premium: #e0c184;
    --omni-color-accent-premium-soft: rgba(224, 193, 132, 0.24);
    --omni-color-danger: #ff8075;
    --omni-color-success: #8fe3ba;
    --omni-color-warning: #ffd479;
    --omni-color-info: #c0cbff;
}