/*
 * TikFlow design tokens and base styles: Sapphire × TikTok palette, day and night (docs/BRAND-AND-MOTION-SPEC.md,
 * docs/lots/LOT-THEME-SAPHIR.md). Night follows the system setting (prefers-color-scheme) unless a platform visitor
 * chose a mode (data-theme, platform.css). Every text/background pair is checked against WCAG 2.2 AA (text
 * >= 4.5:1, control borders and focus >= 3:1) by PlatformPaletteTests, which reads this file.
 * Storefronts keep their own frozen tokens (css/storefront-tokens.css, linked by StorefrontHead after this file); the
 * .tf-platform class gives platform values back to the seller's notice inside a storefront preview.
 * No CSS framework and no web font: one small stylesheet, loaded by every page. Seller-area and account styles live in
 * platform.css, which storefront hosts never load.
 */

:root,
.tf-platform {
    color-scheme: light dark;

    /* Brand palette (primitives). --iris-500 now names the cyan: the former violet survives only in storefronts. */
    --sapphire-500: #2453e6;
    --sapphire-600: #1c42c2;
    --sapphire-900: #0b1e4f; /* home: brand band at night */
    --sapphire-950: #0b1533;
    --midnight-900: #0e1530; /* night surface */
    --midnight-990: #070b1a;
    --graphite-900: #0b1533;
    --pearl-50: #f4f6fb;
    --mist-200: #e3e8f4;
    --mist-300: #cbd0e0; /* illustration strokes (decorative) */
    --slate-400: #8a93b5; /* muted on night surfaces (5.9:1) */
    --slate-600: #5b6488; /* muted on light paper (5.4:1) */
    --glacier-400: #4fe3ea; /* never text on a light background (1.4:1) */
    --electric-500: #ff3d6e; /* urgency badges only, ink text (5.3:1), never white (3.4:1) */
    --iris-500: #4fe3ea;

    /* Semantic colors, day */
    --color-bg: var(--pearl-50);
    --color-surface: #ffffff;
    --color-surface-hover: #eef2fb;
    --color-text: var(--graphite-900);
    --color-text-muted: #4f5a7a;
    --color-border: var(--mist-200); /* separators only (decorative) */
    --color-control-border: #6b7499; /* form controls, 4.2:1 */
    --color-brand: var(--sapphire-500);
    --color-brand-strong: var(--sapphire-600);
    --color-brand-soft: #e8eeff;
    --color-accent: var(--glacier-400);
    --color-accent-hot: var(--electric-500);
    --color-on-accent: var(--sapphire-950);
    --color-on-accent-hot: var(--sapphire-950);
    --color-accent-text: var(--sapphire-500); /* eyebrows: cyan at night, sapphire by day (5.6:1) */
    --color-focus: var(--sapphire-500); /* 5.6:1 on the background */
    --color-primary-action-bg: var(--sapphire-500);
    --color-primary-action-hover-bg: var(--sapphire-600);
    --color-primary-action-text: #ffffff;
    --color-success: #137a4b;
    --color-success-soft: #e7f6ee;
    --color-warning: #8a5300;
    --color-warning-soft: #fff4e0;
    --color-danger: #c0262d;
    --color-danger-soft: #fdecec;
    --color-on-danger: #ffffff;
    --color-overlay: rgb(7 11 26 / 0.84); /* midnight-990: badges over a photo, with --color-cover-text */
    --text-shift: -3px -2px 0 var(--glacier-400), 3px 2px 0 var(--electric-500); /* decorative */

    /* Typography */
    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-h1: clamp(1.75rem, 4vw, 2.25rem); /* application pages */
    --font-size-display: clamp(2.2rem, 5vw, 4.5rem); /* marketing H1 (spec) */
    --letter-spacing-display: -0.02em;
    --line-height: 1.5;

    /* Spacing (4px grid: 4, 8, 12, 16, 24, 32, 48, 64, 96) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    /* Shape and elevation */
    --radius-control: 12px;
    --radius-card: 20px;
    --radius-surface: 28px;
    --radius-pill: 999px;
    --shadow-card: 0 1px 2px rgb(11 21 51 / 0.06);

    /* Creator Editorial (storefronts): system serif for creator names and section titles, zero font download */
    --font-family-editorial: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", P052, Georgia, serif;
    --font-size-creator: clamp(2.9rem, 12.5vw, 6.5rem);
    --letter-spacing-creator: -0.03em;

    /* Cover (dark sections), identical day and night; texts audited on #070b1a. A storefront theme may redefine the
       brand, primary action and cover tokens of the storefront (docs/lots/LOT-37A1-COULEUR-COMPOSITIONS.md). */
    --color-cover-bg: var(--midnight-990);
    --color-cover-bg-deep: #04070f;
    --color-cover-text: var(--pearl-50); /* 18.1:1 */
    --color-cover-muted: #a9b4d6; /* 9.5:1 */
    --color-cover-link: var(--glacier-400); /* 12.6:1 */
    --color-cover-line: #23305a; /* decorative */
    --color-cover-control-border: #6b7499; /* 4.3:1: the validated #3a4a80 is 2.3:1 */
    --color-cover-glow: rgb(36 83 230 / 0.45); /* decorative */
    --color-cover-glow-secondary: rgb(255 61 110 / 0.18); /* decorative */
    --color-cover-dot-glow: rgb(79 227 234 / 0.22); /* decorative */
    --color-cover-focus-glow: rgb(79 227 234 / 0.4); /* decorative, beside the focus outline */
    --color-cover-action-bg: var(--glacier-400); /* ink text 11.6:1 */
    --color-cover-action-hover-bg: #7aeef3; /* ink text 13.1:1 */
    --color-cover-action-text: var(--sapphire-950);
    --color-cover-danger: #ffb3b6;
    --color-cover-danger-soft: rgb(255 179 182 / 0.1);
    --color-cover-danger-text: #ffe1e2;
    --shadow-cover-dark: 0 0 0 1px rgb(79 227 234 / 0.12), 0 30px 80px -24px rgb(36 83 230 / 0.6);
    --gradient-ring: conic-gradient(from 210deg, var(--glacier-400), var(--sapphire-500), var(--electric-500), var(--glacier-400));
    --color-logo-plate: #ffffff; /* behind a seller's logo (BrandAssetRules.LogoPlate) */

    /* Motion (micro 120-200 ms, panel 180-300 ms, editorial 350-550 ms) */
    --duration-micro: 160ms;
    --duration-panel: 240ms;
    --duration-editorial: 480ms;
    --duration-live: 2400ms; /* live state breath, twice: < 5 s (WCAG 2.2.2) */
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);

    /* Layout */
    --content-max-width: 60rem;
    --tap-target: 2.75rem;
}

/* Night: kept identical to [data-theme="night"] in platform.css. :where(): frozen storefront tokens still win. */
@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="day"])),
    .tf-platform {
        --color-bg: var(--midnight-990);
        --color-surface: #0e1530;
        --color-surface-hover: #142045;
        --color-text: var(--pearl-50);
        --color-text-muted: #a9b4d6;
        --color-border: #23305a; /* separators only (decorative) */
        --color-control-border: #6b7499; /* 3.5:1 on the hover surface: the validated #3a4a80 is 2.1:1 */
        --color-brand: var(--glacier-400); /* links: 10.2:1 at worst; sapphire would be 3.2:1 */
        --color-brand-strong: #7aeef3;
        --color-brand-soft: rgb(36 83 230 / 0.16);
        --color-accent-text: var(--glacier-400);
        --color-focus: var(--glacier-400);
        --color-primary-action-bg: var(--sapphire-500);
        --color-primary-action-hover-bg: #3a66f5;
        --color-primary-action-text: #ffffff;
        --color-success: #4fd69c;
        --color-success-soft: #0f2f2a;
        --color-warning: #f5b54a;
        --color-warning-soft: #33270f;
        --color-danger: #ff8a8f;
        --color-danger-soft: #3a1420;
        --color-on-danger: var(--midnight-990);
        --color-logo-plate: var(--pearl-50);
        --shadow-card: 0 0 0 1px #23305a;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}

/* Storefront page transitions (cross-document); the platform opts out in css/motion.css. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

::view-transition-group(*) {
    animation-duration: var(--duration-panel);
    animation-timing-function: var(--ease-standard);
}

/* Base */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    line-height: var(--line-height);
    color: var(--color-text);
    background: var(--color-bg);
    overflow-wrap: anywhere;
}

h1,
h2,
h3 {
    line-height: 1.2;
    margin: 0 0 var(--space-3);
}

h1 {
    font-size: var(--font-size-h1);
    letter-spacing: -0.01em;
}

h2 {
    font-size: var(--font-size-xl);
}

h3 {
    font-size: var(--font-size-lg);
}

p {
    margin: 0 0 var(--space-4);
}

/* Containers own their padding: no trailing paragraph margin inside them. */
.card > :last-child,
.empty-state-body > :last-child,
.alert > :last-child {
    margin-bottom: 0;
}

a {
    color: var(--color-brand);
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--color-brand-strong);
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-5) 0;
}

img {
    max-width: 100%;
    height: auto;
}

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

h1:focus {
    outline: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Buttons (pill CTA) */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap-target);
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-pill);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    background: var(--color-surface);
    color: var(--color-text);
    transition:
        background-color var(--duration-micro) var(--ease-standard),
        border-color var(--duration-micro) var(--ease-standard),
        transform var(--duration-micro) var(--ease-standard);
}

.btn:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: var(--color-primary-action-bg);
    border-color: var(--color-primary-action-bg);
    color: var(--color-primary-action-text);
}

.btn-primary:hover {
    background: var(--color-primary-action-hover-bg);
    border-color: var(--color-primary-action-hover-bg);
    color: var(--color-primary-action-text);
}

/* Hint of the error page, also served on storefront hosts (forms and alerts: platform.css) */

.form-hint {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* Blazor */

.blazor-error-boundary {
    padding: var(--space-4);
    border-radius: var(--radius-control);
    background: var(--color-danger);
    color: var(--color-on-danger);
}

.blazor-error-boundary::after {
    content: "Une erreur est survenue.";
}

html:lang(en) .blazor-error-boundary::after {
    content: "Something went wrong.";
}

/* Native disclosure keeps help available without JavaScript. */
.quick-help {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: calc(5.5rem + env(safe-area-inset-bottom));
    z-index: 50;
    max-width: min(24rem, calc(100vw - 2rem));
    color: var(--color-text);
    background: var(--color-surface);
    border: 2px solid var(--color-text-muted);
    border-radius: 1rem;
    box-shadow: 0 4px 20px #0003;
    font-size: 1rem;
    line-height: 1.5;
}
.quick-help summary { min-height: 44px; padding: .75rem 1rem; cursor: pointer; font-weight: 700; }
.quick-help summary:focus-visible { outline: 3px solid var(--color-text); outline-offset: 3px; }
.quick-help-content { max-height: min(60dvh, 32rem); overflow-y: auto; padding: 0 1rem 1rem; overflow-wrap: anywhere; }
.quick-help-content h2 { font-size: 1.125rem; margin: 1rem 0 .5rem; }
.quick-help-content p { margin: 0 0 .75rem; }