/*
 * ACE Core UI System - Phase 1
 * Global design tokens only. This file must not style existing pages directly.
 */

:root {
    /* Color palettes */
    --ace-color-blue-50: #eef6ff;
    --ace-color-blue-100: #d9ebff;
    --ace-color-blue-200: #b9dcff;
    --ace-color-blue-300: #88c7ff;
    --ace-color-blue-400: #50a8ff;
    --ace-color-blue-500: #2f80ed;
    --ace-color-blue-600: #1f66d0;
    --ace-color-blue-700: #1b52a8;
    --ace-color-blue-800: #1a4788;
    --ace-color-blue-900: #183c70;

    --ace-color-purple-50: #f3f1ff;
    --ace-color-purple-100: #e8e4ff;
    --ace-color-purple-200: #d4ccff;
    --ace-color-purple-300: #b8a9ff;
    --ace-color-purple-400: #9984ff;
    --ace-color-purple-500: #7c6dff;
    --ace-color-purple-600: #6153df;
    --ace-color-purple-700: #4f43b5;
    --ace-color-purple-800: #40398f;
    --ace-color-purple-900: #342f73;

    --ace-color-green-50: #ecfdf4;
    --ace-color-green-100: #d2f9e3;
    --ace-color-green-200: #a9f4ca;
    --ace-color-green-300: #75e8aa;
    --ace-color-green-400: #40d68e;
    --ace-color-green-500: #1fb974;
    --ace-color-green-600: #13945c;
    --ace-color-green-700: #11764b;
    --ace-color-green-800: #115d3d;
    --ace-color-green-900: #104d34;

    --ace-color-yellow-50: #fff9e8;
    --ace-color-yellow-100: #ffefbd;
    --ace-color-yellow-200: #ffe08a;
    --ace-color-yellow-300: #ffcd55;
    --ace-color-yellow-400: #f7b928;
    --ace-color-yellow-500: #d9970b;
    --ace-color-yellow-600: #b47407;
    --ace-color-yellow-700: #925909;
    --ace-color-yellow-800: #78470f;
    --ace-color-yellow-900: #653b12;

    --ace-color-red-50: #fff0f0;
    --ace-color-red-100: #ffdddd;
    --ace-color-red-200: #ffc1c1;
    --ace-color-red-300: #ff9696;
    --ace-color-red-400: #ff6262;
    --ace-color-red-500: #e53e3e;
    --ace-color-red-600: #c72f2f;
    --ace-color-red-700: #a52727;
    --ace-color-red-800: #882626;
    --ace-color-red-900: #712626;

    --ace-color-cyan-50: #eefcff;
    --ace-color-cyan-100: #d5f7ff;
    --ace-color-cyan-200: #acefff;
    --ace-color-cyan-300: #74e1ff;
    --ace-color-cyan-400: #42c8ff;
    --ace-color-cyan-500: #18aee5;
    --ace-color-cyan-600: #0d8bbb;
    --ace-color-cyan-700: #0e6f96;
    --ace-color-cyan-800: #125b79;
    --ace-color-cyan-900: #134c66;

    --ace-gray-0: #ffffff;
    --ace-gray-25: #fbfcfe;
    --ace-gray-50: #f6f8fb;
    --ace-gray-100: #edf1f7;
    --ace-gray-200: #dbe3ef;
    --ace-gray-300: #c6d2e1;
    --ace-gray-400: #9fb0c5;
    --ace-gray-500: #718299;
    --ace-gray-600: #53657a;
    --ace-gray-700: #39495c;
    --ace-gray-800: #213044;
    --ace-gray-900: #111c2d;
    --ace-gray-950: #07101f;

    /* Semantic colors */
    --ace-primary: var(--ace-color-blue-500);
    --ace-primary-hover: var(--ace-color-blue-600);
    --ace-primary-active: var(--ace-color-blue-700);
    --ace-secondary: var(--ace-color-purple-500);
    --ace-secondary-hover: var(--ace-color-purple-600);
    --ace-secondary-active: var(--ace-color-purple-700);
    --ace-success: var(--ace-color-green-500);
    --ace-warning: var(--ace-color-yellow-500);
    --ace-danger: var(--ace-color-red-500);
    --ace-info: var(--ace-color-cyan-500);

    /* Background and surface tokens */
    --ace-bg-page: var(--ace-gray-50);
    --ace-bg-page-dark-ready: var(--ace-gray-950);
    --ace-bg-muted: var(--ace-gray-100);
    --ace-bg-inverse: var(--ace-gray-950);
    --ace-surface-1: var(--ace-gray-0);
    --ace-surface-2: var(--ace-gray-50);
    --ace-surface-3: var(--ace-gray-100);
    --ace-surface-inverse: #101728;
    --ace-card-bg: var(--ace-surface-1);
    --ace-card-border: var(--ace-gray-200);
    --ace-card-padding: 16px;

    /* Text tokens */
    --ace-text: var(--ace-gray-900);
    --ace-text-muted: var(--ace-gray-600);
    --ace-text-subtle: var(--ace-gray-500);
    --ace-text-inverse: #f7faff;

    /* Typography */
    --ace-font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --ace-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --ace-font-size-2xs: 11px;
    --ace-font-size-xs: 12px;
    --ace-font-size-sm: 13px;
    --ace-font-size-md: 14px;
    --ace-font-size-lg: 16px;
    --ace-font-size-xl: 18px;
    --ace-font-size-2xl: 22px;
    --ace-font-size-3xl: 28px;
    --ace-font-size-4xl: 36px;
    /* (Stage 1.16e, round 6: two weights, 400 the text and 600 the titles and the buttons; no 700.) */
    --ace-font-weight-regular: 400;
    --ace-font-weight-medium: 400;
    --ace-font-weight-semibold: 600;
    --ace-font-weight-bold: 600;
    --ace-line-height-tight: 1.15;
    --ace-line-height-normal: 1.45;
    --ace-line-height-relaxed: 1.65;

    /* Spacing */
    --ace-space-0: 0;
    --ace-space-1: 2px;
    --ace-space-2: 4px;
    --ace-space-3: 6px;
    --ace-space-4: 8px;
    --ace-space-5: 10px;
    --ace-space-6: 12px;
    --ace-space-7: 14px;
    --ace-space-8: 16px;
    --ace-space-10: 20px;
    --ace-space-12: 24px;
    --ace-space-16: 32px;
    --ace-space-20: 40px;
    --ace-space-24: 48px;
    --ace-space-32: 64px;

    /* Radius, borders, shadows */
    --ace-radius-none: 0;
    --ace-radius-xs: 3px;
    --ace-radius-sm: 5px;
    --ace-radius-md: 8px;
    --ace-radius-lg: 10px;
    --ace-radius-xl: 14px;
    --ace-radius-pill: 999px;
    --ace-border-width-0: 0;
    --ace-border-width-1: 1px;
    --ace-border-width-2: 2px;
    --ace-border-color: var(--ace-gray-200);
    --ace-border-color-strong: var(--ace-gray-300);
    --ace-shadow-xs: 0 1px 2px rgba(17, 28, 45, 0.08);
    --ace-shadow-sm: 0 6px 18px rgba(17, 28, 45, 0.08);
    --ace-shadow-md: 0 14px 36px rgba(17, 28, 45, 0.12);
    --ace-shadow-lg: 0 24px 60px rgba(17, 28, 45, 0.16);
    --ace-shadow-focus: 0 0 0 3px rgba(47, 128, 237, 0.28);

    /* Z-index */
    --ace-z-base: 1;
    --ace-z-dropdown: 1000;
    --ace-z-sticky: 1100;
    --ace-z-fixed: 1200;
    --ace-z-overlay: 1300;
    --ace-z-modal: 1400;
    --ace-z-toast: 1500;
    --ace-z-tooltip: 1600;

    /* Opacity and motion */
    --ace-opacity-disabled: 0.5;
    --ace-opacity-muted: 0.68;
    --ace-opacity-overlay: 0.72;
    --ace-transition-fast: 120ms ease;
    --ace-transition-normal: 180ms ease;
    --ace-transition-slow: 260ms ease;
    --ace-animation-duration-fast: 140ms;
    --ace-animation-duration-normal: 220ms;

    /* Breakpoints and containers */
    --ace-breakpoint-xs: 420px;
    --ace-breakpoint-sm: 640px;
    --ace-breakpoint-md: 768px;
    --ace-breakpoint-lg: 1024px;
    --ace-breakpoint-xl: 1280px;
    --ace-breakpoint-2xl: 1536px;
    --ace-container-sm: 640px;
    --ace-container-md: 768px;
    --ace-container-lg: 1024px;
    --ace-container-xl: 1200px;
    --ace-container-2xl: 1440px;

    /* Layout and density */
    --ace-layout-sidebar-width: 286px;
    --ace-layout-sidebar-collapsed-width: 92px;
    --ace-layout-header-height: 68px;
    --ace-layout-content-max: 1440px;
    --ace-density-compact: 0.86;
    --ace-density-normal: 1;
    --ace-density-comfortable: 1.14;

    /* Icon sizes */
    --ace-icon-xs: 12px;
    --ace-icon-sm: 16px;
    --ace-icon-md: 20px;
    --ace-icon-lg: 24px;
    --ace-icon-xl: 32px;

    /* Component foundation tokens */
    --ace-button-height-sm: 32px;
    --ace-button-height-md: 38px;
    --ace-button-height-lg: 44px;
    --ace-button-padding-x: 14px;
    --ace-button-radius: var(--ace-radius-md);
    --ace-form-control-height: 38px;
    --ace-form-control-radius: var(--ace-radius-md);
    --ace-form-control-border: var(--ace-border-color);
    --ace-table-row-height: 44px;
    --ace-table-cell-padding-y: 10px;
    --ace-table-cell-padding-x: 12px;
    --ace-table-border: rgba(113, 130, 153, 0.18);
    --ace-focus-ring: var(--ace-shadow-focus);
    --ace-hover-surface: rgba(47, 128, 237, 0.08);
    --ace-disabled-opacity: var(--ace-opacity-disabled);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --ace-transition-fast: 0ms linear;
        --ace-transition-normal: 0ms linear;
        --ace-transition-slow: 0ms linear;
        --ace-animation-duration-fast: 0ms;
        --ace-animation-duration-normal: 0ms;
    }
}