/*
 * Design tokens — MCR AeroLink.
 *
 * Brand colours come from the logo: navy #132b52, sky #4a8dcf and teal #4fc2bf
 * (mirrored in config/brand.php for non-CSS contexts such as theme-color and
 * email; a test keeps the two in sync).
 *
 * Raw palettes live in @theme (they generate utilities such as bg-navy-900).
 * Semantic tokens (canvas, surface, ink, line, accent…) are plain custom
 * properties that switch with the theme, and are mapped to utilities through
 * @theme inline so `bg-surface` always resolves to the active theme.
 *
 * Every text/background pairing in App\Core\Support\DesignTokens::CONTRAST_PAIRS
 * is checked against WCAG 2.2 AA in both themes by
 * tests/Unit/Core/Support/DesignTokensTest.php. Brand sky (#4a8dcf) is too light
 * for white text, so the accent fill uses the deeper sky-600 and text in the
 * accent colour uses `text-accent-ink`.
 */

@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));

@theme {
    --color-*: initial;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-transparent: transparent;
    --color-current: currentColor;

    /* Brand palettes from the MCR AeroLink logo (config/brand.php). Generated in OKLCH so
       each exact logo colour sits on its step: navy-900, sky-500 and teal-400. */
    --color-navy-50: #f2f7ff;
    --color-navy-100: #e4edfb;
    --color-navy-200: #c7d9f5;
    --color-navy-300: #a4bfeb;
    --color-navy-400: #82a5db;
    --color-navy-500: #6589c2;
    --color-navy-600: #4b6ea5;
    --color-navy-700: #365588;
    --color-navy-800: #24406d;
    --color-navy-900: #132b52;
    --color-navy-950: #0a1e3f;

    --color-sky-50: #f2f7fe;
    --color-sky-100: #dfeefe;
    --color-sky-200: #bddbfb;
    --color-sky-300: #93c3f5;
    --color-sky-400: #6ca9e7;
    --color-sky-500: #4a8dcf;
    --color-sky-600: #3074b4;
    --color-sky-700: #1c5d98;
    --color-sky-800: #09497e;
    --color-sky-900: #003662;
    --color-sky-950: #00203f;

    --color-teal-50: #edfaf9;
    --color-teal-100: #dcf3f2;
    --color-teal-200: #b6e6e4;
    --color-teal-300: #84d6d3;
    --color-teal-400: #4fc2bf;
    --color-teal-500: #09a7a5;
    --color-teal-600: #008a88;
    --color-teal-700: #066f6d;
    --color-teal-800: #005655;
    --color-teal-900: #003f3e;
    --color-teal-950: #002525;

    --color-success-50: #e8f8f0;
    --color-success-100: #c6eeda;
    --color-success-300: #6cd9a5;
    --color-success-400: #47cd89;
    --color-success-500: #12b76a;
    --color-success-600: #079455;
    --color-success-700: #067647;
    --color-success-800: #075e3a;

    --color-warning-50: #fef6e7;
    --color-warning-100: #fee9c4;
    --color-warning-300: #fdc266;
    --color-warning-400: #fdb022;
    --color-warning-500: #f79009;
    --color-warning-600: #dc6803;
    --color-warning-700: #b54708;
    --color-warning-800: #93370d;

    --color-danger-50: #fef0ef;
    --color-danger-100: #fed9d6;
    --color-danger-300: #fda29b;
    --color-danger-400: #f97066;
    --color-danger-500: #f04438;
    --color-danger-600: #d92d20;
    --color-danger-700: #b42318;
    --color-danger-800: #912018;

    --color-neutral-50: #f8fafc;
    --color-neutral-100: #f1f4f9;
    --color-neutral-200: #e3e8f0;
    --color-neutral-300: #cbd3df;
    --color-neutral-400: #98a2b3;
    --color-neutral-500: #6b7489;
    --color-neutral-600: #4d5668;
    --color-neutral-700: #384152;
    --color-neutral-800: #232b3a;
    --color-neutral-900: #141a26;
    --color-neutral-950: #0a0e17;

    --font-*: initial;
    --font-sans:
        'Segoe UI', 'Selawik', 'Selawik Fallback', 'Selawik Fallback Roboto', system-ui, -apple-system,
        BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --font-secondary:
        'Selawik', 'Selawik Fallback', 'Selawik Fallback Roboto', 'Segoe UI', system-ui, -apple-system,
        'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'Cascadia Code', 'SFMono-Regular', Menlo, Consolas, monospace;

    --text-display: clamp(2.5rem, 1.8333rem + 2.963vw, 4.5rem);
    --text-display--line-height: 1.05;
    --text-display--letter-spacing: -0.025em;
    --text-h1: clamp(2rem, 1.5833rem + 1.852vw, 3.25rem);
    --text-h1--line-height: 1.1;
    --text-h1--letter-spacing: -0.02em;
    --text-h2: clamp(1.625rem, 1.375rem + 1.111vw, 2.375rem);
    --text-h2--line-height: 1.15;
    --text-h2--letter-spacing: -0.015em;
    --text-h3: clamp(1.3125rem, 1.1667rem + 0.648vw, 1.75rem);
    --text-h3--line-height: 1.25;
    --text-h3--letter-spacing: -0.01em;
    --text-h4: clamp(1.125rem, 1.0417rem + 0.37vw, 1.375rem);
    --text-h4--line-height: 1.3;
    --text-body-lg: clamp(1.125rem, 1.0833rem + 0.185vw, 1.25rem);
    --text-body-lg--line-height: 1.55;
    --text-body: clamp(1rem, 0.9792rem + 0.0926vw, 1.0625rem);
    --text-body--line-height: 1.5;
    --text-small: 0.875rem;
    --text-small--line-height: 1.45;
    --text-micro: 0.75rem;
    --text-micro--line-height: 1.35;

    --breakpoint-xs: 30rem;

    --radius-*: initial;
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.875rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.75rem;
    --radius-full: 9999px;

    --shadow-*: initial;
    --shadow-xs: 0 1px 2px rgb(10 30 63 / 0.06);
    --shadow-sm: 0 1px 3px rgb(10 30 63 / 0.08), 0 1px 2px rgb(10 30 63 / 0.04);
    --shadow-md: 0 6px 16px -4px rgb(10 30 63 / 0.1), 0 2px 6px -2px rgb(10 30 63 / 0.06);
    --shadow-lg: 0 16px 32px -8px rgb(10 30 63 / 0.14), 0 4px 10px -4px rgb(10 30 63 / 0.06);
    --shadow-xl: 0 28px 56px -12px rgb(10 30 63 / 0.24);
    --shadow-glow: 0 10px 28px -8px rgb(74 141 207 / 0.55);

    --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-emphasis: linear(
        0,
        0.009,
        0.035 2.1%,
        0.141 4.4%,
        0.723 12.9%,
        0.938 16.7%,
        1.017,
        1.077,
        1.121,
        1.149 24.3%,
        1.159,
        1.163,
        1.161,
        1.154 29.9%,
        1.129 32.8%,
        1.051 39.6%,
        1.017 43.1%,
        0.991,
        0.977 51%,
        0.974 53.8%,
        0.975 57.1%,
        0.997 69.8%,
        1.003 76.9%,
        1
    );
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);

    --animate-spin: spin 0.8s linear infinite;
    --animate-pulse-dot: pulse-dot 1.8s var(--ease-standard) infinite;
}

@theme inline {
    --color-canvas: var(--canvas);
    --color-surface: var(--surface);
    --color-surface-raised: var(--surface-raised);
    --color-surface-sunken: var(--surface-sunken);
    --color-surface-inverse: var(--surface-inverse);
    --color-ink: var(--ink);
    --color-ink-muted: var(--ink-muted);
    --color-ink-subtle: var(--ink-subtle);
    --color-ink-inverse: var(--ink-inverse);
    --color-line: var(--line);
    --color-line-strong: var(--line-strong);
    --color-accent: var(--accent);
    --color-accent-hover: var(--accent-hover);
    --color-accent-ink: var(--accent-ink);
    --color-on-accent: var(--on-accent);
    --color-link: var(--link);
    --color-link-hover: var(--link-hover);
    --color-focus: var(--focus);
    --color-overlay: var(--overlay);
    --color-success: var(--success);
    --color-success-ink: var(--success-ink);
    --color-success-soft: var(--success-soft);
    --color-warning: var(--warning);
    --color-warning-ink: var(--warning-ink);
    --color-warning-soft: var(--warning-soft);
    --color-danger: var(--danger);
    --color-danger-ink: var(--danger-ink);
    --color-danger-soft: var(--danger-soft);
    --color-info: var(--info);
    --color-info-ink: var(--info-ink);
    --color-info-soft: var(--info-soft);
}

/* Light theme (default). :where() keeps :root at zero specificity so [data-theme] always wins. */
:where(:root),
[data-theme='light'] {
    color-scheme: light;
    --canvas: #f5f8fc;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-sunken: #edf2f8;
    --surface-inverse: #132b52;
    --ink: #0b1a33;
    --ink-muted: #4a5873;
    --ink-subtle: #5f6b82;
    --ink-inverse: #f5f8fc;
    --line: #dbe3ee;
    --line-strong: #7a879f;
    --accent: #3074b4;
    --accent-hover: #1c5d98;
    --accent-ink: #1c5d98;
    --on-accent: #ffffff;
    --link: #1c5d98;
    --link-hover: #09497e;
    --focus: #4a8dcf;
    --overlay: rgb(5 13 28 / 0.55);
    --success: #12b76a;
    --success-ink: #067647;
    --success-soft: #e7f7ef;
    --warning: #f79009;
    --warning-ink: #93370d;
    --warning-soft: #fef4e6;
    --danger: #d92d20;
    --danger-ink: #b42318;
    --danger-soft: #feedec;
    --info: #3074b4;
    --info-ink: #09497e;
    --info-soft: #f2f7fe;
}

/* Dark theme: whole document via the theme bootstrap script, or any section with data-theme="dark". */
[data-theme='dark'] {
    color-scheme: dark;
    --canvas: #050d1c;
    --surface: #0a1730;
    --surface-raised: #10203f;
    --surface-sunken: #071226;
    --surface-inverse: #f5f8fc;
    --ink: #f2f6fc;
    --ink-muted: #a9b6cc;
    --ink-subtle: #8d9ab3;
    --ink-inverse: #0b1a33;
    --line: #1b2b4a;
    --line-strong: #62739a;
    --accent: #6ca9e7;
    --accent-hover: #93c3f5;
    --accent-ink: #93c3f5;
    --on-accent: #0a1e3f;
    --link: #93c3f5;
    --link-hover: #bddbfb;
    --focus: #6ca9e7;
    --overlay: rgb(2 6 14 / 0.72);
    --success: #12b76a;
    --success-ink: #47cd89;
    --success-soft: #0f2a22;
    --warning: #f79009;
    --warning-ink: #fdb022;
    --warning-soft: #2e2210;
    --danger: #d92d20;
    --danger-ink: #f97066;
    --danger-soft: #341619;
    --info: #4a8dcf;
    --info-ink: #93c3f5;
    --info-soft: #0d2547;
}

@media (prefers-contrast: more) {
    :where(:root),
    [data-theme='light'] {
        --ink-muted: #2a3650;
        --ink-subtle: #3a4660;
        --line: #7a879f;
        --line-strong: #2a3650;
    }

    [data-theme='dark'] {
        --ink-muted: #d3dbe8;
        --ink-subtle: #bfc9da;
        --line: #62739a;
        --line-strong: #bfc9da;
    }
}

/* Named stacking layers (section 6.2 z-index scale). */
@utility z-base {
    z-index: 0;
}

@utility z-sticky {
    z-index: 20;
}

@utility z-dropdown {
    z-index: 30;
}

@utility z-overlay {
    z-index: 40;
}

@utility z-modal {
    z-index: 50;
}

@utility z-toast {
    z-index: 60;
}

@utility z-tooltip {
    z-index: 70;
}