/*
 * LORYANE® — Design tokens
 *
 * Ce fichier constitue la source centrale des valeurs visuelles globales.
 *
 * DA-02 applique la palette claire validée par DA-01. Les valeurs de marque,
 * d’état et d’interaction ne doivent pas être redéfinies dans les composants.
 */

:root {
    /* =========================================================
       COLORS — NEUTRAL FOUNDATION
       ========================================================= */

    --color-white: #ffffff;
    --color-black: #000000;

    --color-neutral-50: #f7f7f7;
    --color-neutral-100: #eeeeee;
    --color-neutral-200: #dddddd;
    --color-neutral-300: #c7c7c7;
    --color-neutral-500: #777777;
    --color-neutral-700: #444444;
    --color-neutral-900: #222222;

    /* =========================================================
       COLORS — BRAND / DA-01
       ========================================================= */

    --color-brand-primary: #34231c;
    --color-brand-secondary: #8e512f;
    --color-brand-accent: #9c650d;
    --color-brand-ivory: #fbf7f3;
    --color-brand-rose: #e8d8d7;
    --color-brand-taupe: #c7b8b1;
    --color-brand-champagne: #ddbd6b;
    --color-brand-champagne-soft: #f3e6cd;

    /* RGB channels are reserved for transparent decorative treatments. */
    --color-brand-primary-rgb: 52 35 28;
    --color-brand-rose-rgb: 232 216 215;
    --color-brand-champagne-rgb: 221 189 107;
    --color-surface-rgb: 255 253 251;

    /* =========================================================
       COLORS — SEMANTIC
       ========================================================= */

    --color-background: var(--color-brand-ivory);
    --color-surface: #fffdfb;
    --color-surface-muted: #f8efeb;
    --color-surface-accent: #f5e9e4;
    --color-surface-interactive: #f6ece8;
    --color-surface-footer-start: #eee2de;
    --color-surface-footer-end: #faf3ef;
    --color-text: var(--color-brand-primary);
    --color-text-muted: #6a5951;
    --color-text-on-brand: #fffaf5;
    --color-border: #ded0c9;
    --color-border-strong: #d5bda9;

    /*
     * Semantic UI state colors.
     * These values meet the AA contrast target on the light surfaces used by
     * the interface. State must never be communicated by color alone.
     */
    --color-state-info: #245b8a;
    --color-state-success: #1f6b45;
    --color-state-warning: #8a5a00;
    --color-state-error: #9f2d2d;
    --color-state-disabled: var(--color-neutral-300);

    --color-action-primary-hover: var(--color-brand-secondary);
    --color-action-primary-active: #6f3d24;
    --color-action-secondary-hover: var(--color-brand-rose);
    --color-action-secondary-active: var(--color-brand-taupe);
    --color-action-danger-hover: #812424;
    --color-action-danger-active: #681d1d;

    /* =========================================================
       TYPOGRAPHY
       ========================================================= */

    --font-family-sans: "Avenir Next", Avenir, "Segoe UI", sans-serif;
    --font-family-serif: "Iowan Old Style", Baskerville, "Palatino Linotype", Georgia, serif;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;

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

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;

    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.12em;

    /* =========================================================
       SPACING
       ========================================================= */

    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* =========================================================
       BORDER RADIUS
       ========================================================= */

    --radius-none: 0;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* =========================================================
       SHADOWS
       ========================================================= */

    --shadow-none: none;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 6%);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 8%);
    --shadow-lg: 0 12px 32px rgb(0 0 0 / 12%);
    --shadow-brand-header: 0 0.35rem 1.5rem rgb(var(--color-brand-primary-rgb) / 4%);
    --shadow-brand-card: 0 1rem 2.5rem rgb(var(--color-brand-primary-rgb) / 7%);
    --shadow-brand-strong: 0 1rem 2.5rem rgb(var(--color-brand-primary-rgb) / 18%);

    /* =========================================================
       INTERACTION AND ACCESSIBILITY
       ========================================================= */

    --size-control-min: 2.75rem;
    --size-control-comfortable: 3rem;
    --focus-ring-width: 0.125rem;
    --focus-ring-offset: 0.25rem;
    --focus-ring-color: var(--color-brand-primary);

    /* =========================================================
       CONTENT WIDTHS
       ========================================================= */

    --width-content-sm: 42rem;
    --width-content-md: 64rem;
    --width-content-lg: 80rem;
    --width-content-xl: 90rem;

    /* =========================================================
       BREAKPOINTS — REFERENCE VALUES
       CSS custom properties cannot be used directly inside
       @media conditions. These values document the canonical
       breakpoints to reproduce in media queries.
       ========================================================= */

    --breakpoint-sm: 36rem;
    --breakpoint-md: 48rem;
    --breakpoint-lg: 64rem;
    --breakpoint-xl: 80rem;

    /* =========================================================
       TRANSITIONS
       ========================================================= */

    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    --easing-standard: ease;
}