/*
 * PULSE Design Tokens
 *
 * Variables CSS communes à toute la stack PULSE. À surcharger par projet
 * dans un fichier projet-specific (ex: stamm-tokens.css avec palette OTTER).
 *
 * Référence : design system PULSE Bricks 2026.
 */

:root {
    /* ---------- Palette PULSE (neutre, à override par projet) ---------- */
    --pulse-color-bg:           #ffffff;
    --pulse-color-bg-alt:       #f7f6f3;
    --pulse-color-fg:           #1a1a1a;
    --pulse-color-fg-muted:     #5c5c5c;
    --pulse-color-primary:      #0f766e;  /* PULSE teal */
    --pulse-color-primary-hover:#0a5953;
    --pulse-color-accent:       #f59e0b;
    --pulse-color-border:       #e5e5e5;
    --pulse-color-success:      #22c55e;
    --pulse-color-warning:      #f97316;
    --pulse-color-danger:       #dc2626;

    /* ---------- Typographie ---------- */
    --pulse-font-sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --pulse-font-serif: Georgia, "Times New Roman", serif;
    --pulse-font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;

    --pulse-font-base-size:   16px;
    --pulse-font-base-line:   1.65;
    --pulse-font-heading-line:1.15;

    /* Type scale (1.250 — major third) */
    --pulse-font-size-xs:  0.75rem;   /* 12 */
    --pulse-font-size-sm:  0.875rem;  /* 14 */
    --pulse-font-size-md:  1rem;      /* 16 */
    --pulse-font-size-lg:  1.25rem;   /* 20 */
    --pulse-font-size-xl:  1.5rem;    /* 24 */
    --pulse-font-size-2xl: 2rem;      /* 32 */
    --pulse-font-size-3xl: 2.5rem;    /* 40 */
    --pulse-font-size-4xl: 3.5rem;    /* 56 */

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

    /* ---------- Layout ---------- */
    --pulse-container-max:    1280px;
    --pulse-container-narrow: 720px;
    --pulse-container-gutter: var(--pulse-space-5);

    /* ---------- Breakpoints (informatif — utiliser via @media) ---------- */
    --pulse-bp-sm: 640px;
    --pulse-bp-md: 768px;
    --pulse-bp-lg: 1024px;
    --pulse-bp-xl: 1280px;
    --pulse-bp-2xl:1536px;

    /* ---------- Radius & shadows ---------- */
    --pulse-radius-sm: 4px;
    --pulse-radius-md: 8px;
    --pulse-radius-lg: 16px;
    --pulse-radius-full: 9999px;

    --pulse-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.04);
    --pulse-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --pulse-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

    /* ---------- Motion ---------- */
    --pulse-motion-fast: 120ms;
    --pulse-motion-mid:  240ms;
    --pulse-motion-slow: 480ms;
    --pulse-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --pulse-color-bg:       #0a0a0a;
        --pulse-color-bg-alt:   #141414;
        --pulse-color-fg:       #fafafa;
        --pulse-color-fg-muted: #a3a3a3;
        --pulse-color-border:   #2a2a2a;
    }
}

/* ---------- Reset / base utiles standalone (fallback sans Bricks) ---------- */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }
body {
    margin: 0;
    font-family: var(--pulse-font-sans);
    font-size: var(--pulse-font-base-size);
    line-height: var(--pulse-font-base-line);
    color: var(--pulse-color-fg);
    background: var(--pulse-color-bg);
}
a { color: var(--pulse-color-primary); text-decoration: none; }
a:hover { color: var(--pulse-color-primary-hover); text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }