/*
 * Design tokens — single source of truth for visual style across OP and SSP.
 * Phase 1 of the refactor (see docs/frontend-refactor-plan.md).
 *
 * Naming: semantic over literal. Use --color-text, not --color-gray-900.
 * Consumers: components.css, base.css, future utility classes, inline overrides.
 * Browser support: CSS custom properties (all evergreen + IE11 fallback NOT supported).
 */

:root {
    /* ============================================================
     * COLOR — brand
     * ============================================================ */
    --color-primary: #0c5afd;
    --color-primary-hover: #094bd6;
    --color-primary-active: #073ba8;
    --color-primary-subtle: #e7efff;
    --color-on-primary: #ffffff;

    /* ============================================================
     * COLOR — status
     * ============================================================ */
    --color-success: #28a745;
    --color-success-subtle: #d4edda;
    --color-warning: #ffc107;
    --color-warning-subtle: #fff3cd;
    --color-danger: #dc3545;
    --color-danger-subtle: #f8d7da;
    --color-info: #17a2b8;
    --color-info-subtle: #d1ecf1;

    /* ============================================================
     * COLOR — surfaces & text
     * ============================================================ */
    --color-bg: #ffffff;
    --color-bg-subtle: #f8f9fa;
    --color-bg-muted: #e9ecef;
    --color-bg-table-row-selected: #eee8aa;   /* matches existing .table-select */

    --color-border: #dee2e6;
    --color-border-strong: #adb5bd;
    --color-border-divider: skyblue;          /* legacy divider color, parameterized */
    --color-border-divider-soft: azure;

    --color-text: #212529;
    --color-text-muted: #6c757d;
    --color-text-required: #e3342f;
    --color-text-link: var(--color-primary);
    --color-text-on-dark: #ffffff;

    /* ============================================================
     * SPACING — 4px scale; use these instead of arbitrary rems
     * ============================================================ */
    --space-1: 0.25rem;    /* 4px  */
    --space-2: 0.5rem;     /* 8px  */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px — most common inline `margin-top: 1rem` */
    --space-5: 1.5rem;     /* 24px */
    --space-6: 2rem;       /* 32px */
    --space-8: 3rem;       /* 48px */
    --space-10: 4rem;      /* 64px */

    /* ============================================================
     * TYPOGRAPHY
     * ============================================================ */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI",
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;

    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px — Bootstrap default body */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */

    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-loose: 1.75;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* ============================================================
     * RADII
     * ============================================================ */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-pill: 9999px;

    /* ============================================================
     * SHADOW
     * ============================================================ */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* ============================================================
     * Z-INDEX — kept aligned with Bootstrap's defaults
     * ============================================================ */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* ============================================================
     * MOTION
     * ============================================================ */
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

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