/* ============================
   Commerce Design Tokens v1.0
   WCAG 2.1 AA by default
   ============================ */

/* -----------------------------------
   1. Base (raw color values)
----------------------------------- */
:root {
    --c-neutral-900: #222222;
    --c-neutral-800: #2a2a2a;
    --c-neutral-100: #f5f5f5;
    --c-neutral-000: #ffffff;

    --c-blue-700: #0050aa;
    /* link (light) */
    --c-blue-600: #005fcc;
    /* focus + active (light) */
    --c-blue-400: #6da8ff;
    /* link (dark) */

    --c-green-600: #2da44e;
    /* success */
    --c-red-600: #cf222e;
    /* danger */
    --c-orange-700: #953800;
    /* warning */
    --c-blue-700i: #0550ae;
    /* info */

    --c-border-light: #cccccc;
    --c-border-dark: #555555;
}

/* -----------------------------------
   2. Semantic Tokens (LIGHT MODE)
----------------------------------- */
:root {
    /* Text */
    --text-primary: var(--c-neutral-900);
    --text-inverse: #e5e5e5;
    --text-secondary: #444444;

    /* Surfaces */
    --surface-1: var(--c-neutral-000);
    --surface-2: var(--c-neutral-100);

    /* Interactive */
    --link-color: var(--c-blue-700);
    --link-hover: #003d82;
    --focus-ring: var(--c-blue-600);
    --focus-ring-width: 3px;

    /* Status */
    --status-success: var(--c-green-600);
    --status-danger: var(--c-red-600);
    --status-warning: var(--c-orange-700);
    --status-info: var(--c-blue-700i);

    /* Borders */
    --border-color: var(--c-border-light);
}

/* -----------------------------------
   3. Utility Tokens
----------------------------------- */
:root {
    --shadow-focus: 0 0 0 var(--focus-ring-width) var(--focus-ring);
    --opacity-disabled: 0.5;
}

/* -----------------------------------
   4. Layout & Typography
----------------------------------- */
:root {
    --layout-max-width: 900px;
    --elevation-1: 0 0 8px rgba(0, 0, 0, 0.12);

    --heading-color: var(--text-primary);
    --heading-1-size: clamp(1.75rem, 2vw + 1rem, 2.25rem);
    --heading-1-line: 1.2;
    --heading-2-size: clamp(1.375rem, 1.2vw + 1rem, 1.75rem);
    --heading-2-line: 1.25;
    --heading-3-size: 1.125rem;
    --heading-3-line: 1.3;

    --caption-size: 0.9rem;

    /* Footer */
    --footer-fg: var(--text-primary);
    /* light footer: dark text for contrast */
    --footer-surface: #9e9e9e;
}

/* -----------------------------------
   5. Component Tokens
----------------------------------- */

/* Buttons */
:root {
    --btn-font-weight: 600;
    --btn-radius: 6px;
    --btn-padding-y: 0.5rem;
    --btn-padding-x: 1rem;

    --btn-primary-bg: var(--link-color);
    --btn-primary-fg: var(--text-inverse);
    --btn-primary-bg-hover: var(--link-hover);

    --btn-secondary-bg: color-mix(in oklab, var(--surface-1) 85%, var(--border-color));
    --btn-secondary-fg: var(--text-primary);
    --btn-secondary-bg-hover: color-mix(in oklab, var(--surface-1) 70%, var(--border-color));

    --btn-danger-bg: var(--status-danger);
    --btn-danger-fg: var(--text-inverse);
    --btn-danger-bg-hover: color-mix(in oklab, var(--status-danger) 85%, black);
}

/* Cards */
:root {
    --card-bg: var(--surface-1);
    --card-fg: var(--text-primary);
    --card-border: var(--border-color);
    --card-radius: 8px;
    --card-padding: 1rem;
    --card-shadow: var(--elevation-1);
}

/* -----------------------------------
   6. Focus Helper
----------------------------------- */
:where(a, button, [role="button"], input, textarea, select):focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: 3px;
}

/* -----------------------------------
   7. DARK MODE OVERRIDES
   (Placed *last* — required for iOS/Safari)
----------------------------------- */
@media (prefers-color-scheme: dark) {
    :root {
        /* Text */
        --text-primary: #eaeaea;
        --text-secondary: #bbbbbb;
        --text-inverse: #111111;

        /* Surfaces */
        --surface-1: #2a2a2a;
        --surface-2: #161616;

        /* Borders */
        --border-color: #555555;

        /* Links */
        --link-color: #6da8ff;
        --link-hover: #94c1ff;

        --focus-ring: var(--c-blue-400);

        --footer-fg: var(--text-inverse);
        /* dark footer: white text */
        --footer-surface: #444444;

        /* Cards & Components */
        --card-bg: #2a2a2a;
        --card-fg: var(--text-primary);
        --btn-secondary-bg: color-mix(in oklab, #2a2a2a 85%, var(--border-color));
        --btn-secondary-bg-hover: color-mix(in oklab, #2a2a2a 70%, var(--border-color));
    }
}