/* Fondation — modèle canonique ; son emploi : canon_foundation.md. */

@layer tokens, reset, base, components, utilities, page;

@layer tokens {
    @font-face {
        font-family: "Inter";
        font-style: normal;
        font-weight: 100 900;
        font-display: swap;
        src: url("/assets/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
    }
    @font-face {
        font-family: "Inter";
        font-style: italic;
        font-weight: 100 900;
        font-display: swap;
        src: url("/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
    }
    @font-face {
        font-family: "Inter Tight";
        font-style: normal;
        font-weight: 100 900;
        font-display: swap;
        src: url("/assets/fonts/InterTight-VariableFont_wght.ttf") format("truetype");
    }
    @font-face {
        font-family: "Inter Tight";
        font-style: italic;
        font-weight: 100 900;
        font-display: swap;
        src: url("/assets/fonts/InterTight-Italic-VariableFont_wght.ttf") format("truetype");
    }
}

@layer tokens {
    :root {
        --canon-color-canvas-luxis: #f5f5f7;
        --canon-color-surface-luxis: #f9f9fc;
        --canon-color-raised-luxis: #fdfdff;
        --canon-color-field-luxis: #fdfdff;
        --canon-color-highlight-luxis: #f0f0f4;
        --canon-color-contrast-luxis: hsl(60 2.6% 9.6%);
        --canon-color-ink-luxis: rgb(0 0 0);
        --canon-color-muted-luxis: rgb(0 0 0 / 0.85);
        --canon-color-faint-luxis: rgb(0 0 0 / 0.56);
        --canon-color-line-luxis: hsl(210 7% 11% / 0.08);
        --canon-color-line-hover-luxis: hsl(210 7% 11% / 0.12);
        --canon-color-control-boundary-luxis: rgb(0 0 0 / 0.45);
        --canon-color-action-luxis: #1f5f9e;
        --canon-color-action-hover-luxis: color-mix(in oklab, var(--canon-color-action-luxis) 88%, var(--canon-color-ink-luxis));
        --canon-color-action-active-luxis: color-mix(in oklab, var(--canon-color-action-luxis) 94%, var(--canon-color-ink-luxis));
        --canon-color-on-action-luxis: #fdfdff;
        --canon-color-disabled-luxis: rgb(0 0 0 / 0.2);
        --canon-color-success-luxis: #176b4d;
        --canon-color-success-surface-luxis: #ecfdf3;
        --canon-color-warning-luxis: #7a4a00;
        --canon-color-warning-surface-luxis: #fff7db;
        --canon-color-danger-luxis: #a4262c;
        --canon-color-danger-surface-luxis: #fff1f2;
        --canon-color-info-luxis: #1f5f9e;
        --canon-color-info-surface-luxis: #e8f1fb;
        --canon-color-pending-luxis: hsl(255 85% 68%);
        --canon-color-tint-luxis: rgb(0 0 0 / 0.08);
    }
}

@layer tokens {
    :root,
    :root[data-theme="luxis"] {
        --canon-theme-canvas: var(--canon-color-canvas-luxis);
        --canon-theme-surface: var(--canon-color-surface-luxis);
        --canon-theme-raised: var(--canon-color-raised-luxis);
        --canon-theme-field: var(--canon-color-field-luxis);
        --canon-theme-highlight: var(--canon-color-highlight-luxis);
        --canon-theme-contrast: var(--canon-color-contrast-luxis);
        --canon-theme-ink: var(--canon-color-ink-luxis);
        --canon-theme-muted: var(--canon-color-muted-luxis);
        --canon-theme-faint: var(--canon-color-faint-luxis);
        --canon-theme-line: var(--canon-color-line-luxis);
        --canon-theme-line-hover: var(--canon-color-line-hover-luxis);
        --canon-theme-control-boundary: var(--canon-color-control-boundary-luxis);
        --canon-theme-action: var(--canon-color-action-luxis);
        --canon-theme-action-hover: var(--canon-color-action-hover-luxis);
        --canon-theme-action-active: var(--canon-color-action-active-luxis);
        --canon-theme-on-action: var(--canon-color-on-action-luxis);
        --canon-theme-disabled: var(--canon-color-disabled-luxis);
        --canon-theme-success: var(--canon-color-success-luxis);
        --canon-theme-success-surface: var(--canon-color-success-surface-luxis);
        --canon-theme-warning: var(--canon-color-warning-luxis);
        --canon-theme-warning-surface: var(--canon-color-warning-surface-luxis);
        --canon-theme-danger: var(--canon-color-danger-luxis);
        --canon-theme-danger-surface: var(--canon-color-danger-surface-luxis);
        --canon-theme-info: var(--canon-color-info-luxis);
        --canon-theme-info-surface: var(--canon-color-info-surface-luxis);
        --canon-theme-pending: var(--canon-color-pending-luxis);
        --canon-theme-tint: var(--canon-color-tint-luxis);
    }
    :root {
        --canon-theme-surface-selected: color-mix(in oklab, var(--canon-theme-action) 12%, var(--canon-theme-surface));
        --canon-theme-chrome: rgb(0 0 0 / 0.9);
        --canon-theme-on-chrome: rgb(255 255 255 / 0.85);
        --canon-theme-on-chrome-bright: rgb(255 255 255 / 0.9);
        --canon-theme-on-chrome-success: #7fd3a6;
        --canon-theme-on-chrome-warning: #f0c36a;
        --canon-theme-on-chrome-danger: #f29a9a;
        --canon-theme-on-chrome-info: #8fbbe9;
        --canon-theme-on-chrome-neutral: rgb(255 255 255 / 0.55);
        --canon-theme-focus: var(--canon-theme-action);
        --canon-theme-success-hover: color-mix(in oklab, var(--canon-theme-success) 88%, var(--canon-theme-ink));
        --canon-theme-success-active: color-mix(in oklab, var(--canon-theme-success) 94%, var(--canon-theme-ink));
        --canon-theme-danger-hover: color-mix(in oklab, var(--canon-theme-danger) 88%, var(--canon-theme-ink));
        --canon-theme-danger-active: color-mix(in oklab, var(--canon-theme-danger) 94%, var(--canon-theme-ink));
        --canon-theme-info-hover: color-mix(in oklab, var(--canon-theme-info) 88%, var(--canon-theme-ink));
        --canon-theme-info-active: color-mix(in oklab, var(--canon-theme-info) 94%, var(--canon-theme-ink));
        --canon-theme-neutral: var(--canon-theme-faint);
        --canon-theme-neutral-surface: var(--canon-theme-highlight);
        --canon-theme-neutral-hover: color-mix(in oklab, var(--canon-theme-neutral) 88%, var(--canon-theme-ink));
        --canon-theme-neutral-active: color-mix(in oklab, var(--canon-theme-neutral) 94%, var(--canon-theme-ink));
        --canon-theme-missing: var(--canon-theme-warning);
        --canon-theme-valid: var(--canon-theme-success);
        --canon-theme-invalid: var(--canon-theme-danger);
        --canon-theme-scrim: rgb(0 0 0 / 0.55);
    }
}

@layer tokens {
    :root {
        --canon-font-oratio: "Inter", system-ui, sans-serif;
        --canon-font-figura: "Inter Tight", "Inter", system-ui, sans-serif;
        --canon-size-root: 16px;
        --canon-size-headline: 1.9rem;
        --canon-size-title: 1.3rem;
        --canon-size-subtitle: 1.15rem;
        --canon-size-body: 1rem;
        --canon-size-control: 0.9rem;
        --canon-size-field: max(1rem, 16px);
        --canon-size-note: 0.8rem;
        --canon-size-fine: 0.7rem;
        --canon-weight-quiet: 300;
        --canon-weight-body: 410;
        --canon-weight-label: 520;
        --canon-weight-title: 600;
        --canon-weight-emphasis: 700;
        --canon-leading-title: 1.15;
        --canon-leading-body: 1.5;
        --canon-leading-reading: 1.8;
        --canon-tracking-body: 0.003rem;
    }
    :root {
        --canon-space-edge: 20px;
        --canon-space-1: 4px;
        --canon-space-2: 8px;
        --canon-space-3: 12px;
        --canon-space-4: 16px;
        --canon-space-5: 20px;
        --canon-space-6: 24px;
        --canon-space-7: 28px;
        --canon-space-8: 32px;
        --canon-space-9: 36px;
        --canon-space-10: 40px;
        --canon-space-11: 44px;
        --canon-space-12: 48px;
        --canon-space-13: 52px;
        --canon-space-14: 56px;
        --canon-space-15: 60px;
        --canon-space-16: 64px;
    }
    :root {
        --canon-radius-control: 4px;
        --canon-radius-card: 15px;
        --canon-radius-pill: 999px;
        --canon-line-width: 1px;
        --canon-focus-width: 3px;
        --canon-focus-offset: 2px;
    }
    :root {
        --canon-duration-state: 150ms;
        --canon-duration-reveal: 180ms;
    }
    :root {
        --canon-size-icon-target: 40px;
    }
    :root {
        --canon-plane-header: 100;
        --canon-plane-menu: 200;
        --canon-plane-scrim: 300;
        --canon-plane-popup: 400;
        --canon-plane-notice: 500;
    }
    @media (max-width: 800px) {
        :root {
            --canon-size-root: 15.5px;
            --canon-size-fine: 0.8rem;
            --canon-space-edge: 15px;
        }
    }
    @media (max-width: 600px) {
        :root {
            --canon-size-root: 14px;
            --canon-size-note: 0.85rem;
            --canon-size-fine: 0.85rem;
            --canon-space-edge: 10px;
        }
    }
}

@layer tokens {
    :root,
    :root[data-theme="luxis"],
    :root[data-theme="cinis"] {
        color-scheme: light;
    }
}

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }
    * {
        margin: 0;
        padding: 0;
    }
    [hidden] {
        display: none !important;
    }

    button,
    input,
    select,
    textarea {
        font: inherit;
        color: inherit;
    }

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

@layer base {
    /* scrollbar-gutter n'est pas largement disponible au 2026-10-06 : sans lui, la gouttière n'est
       pas réservée et la page se décale quand la barre de défilement paraît. */
    :root {
        scrollbar-gutter: stable;
    }
    body {
        min-height: 100vh;
    }

    body {
        background-color: var(--canon-theme-canvas);
    }

    :root {
        font-family: var(--canon-font-oratio);
        font-size: var(--canon-size-root);
    }
    body {
        color: var(--canon-theme-ink);
    }
    p,
    h1,
    h2,
    h3 {
        font-weight: var(--canon-weight-body);
        letter-spacing: var(--canon-tracking-body);
        color: var(--canon-theme-ink);
    }
    a {
        color: var(--canon-theme-action);
    }
}

@layer base {
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        margin: 0;
    }

    input[type="number"] {
        appearance: textfield;
    }
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        appearance: none;
    }
}

@layer base {
    img,
    picture,
    video,
    canvas,
    svg {
        max-width: 100%;
    }
    img,
    video {
        height: auto;
    }
}

@layer base {
    :focus-visible {
        outline: var(--canon-focus-width) solid var(--canon-theme-focus);
        outline-offset: var(--canon-focus-offset);
    }
}