/* ═══════════════════════════════════════════════════════════════
   HOSTIP.FR — Design Tokens (dark-only, Claude Design palette)
   Source of truth for colors, typography, radius and shadows.
   Shared by index.php and legal pages.
═══════════════════════════════════════════════════════════════ */

:root {
    color-scheme: dark;

    /* Surfaces */
    --bg: #0A0E1A;
    --elev: #10162A;
    --elev-2: #151C38;
    --border: #1F2847;
    --border-strong: #2A3560;

    /* Text */
    --fg: #E6EAF5;
    --fg-muted: #9AA3BF;
    --fg-dim: #6B7490;

    /* Accents */
    --accent: #4F8BFF;
    --accent-strong: #6BA0FF;
    --accent-weak: rgba(79, 139, 255, 0.12);

    /* Status */
    --ok: #4ADE80;
    --ok-weak: rgba(74, 222, 128, 0.12);
    --warn: #FBBF24;
    --warn-weak: rgba(251, 191, 36, 0.14);
    --bad: #F87171;
    --bad-weak: rgba(248, 113, 113, 0.14);

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Typography */
    --font-display: 'Instrument Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

    /* Shadows */
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 4px 24px -6px rgba(79, 139, 255, 0.28);

    /* ─────────────────────────────────────────────────────────
       Backward-compat aliases (used by css/legal-page.css).
       To retire once legal-page.css is renamed to new tokens.
    ───────────────────────────────────────────────────────── */
    --bg-deep: var(--bg);
    --bg-card: var(--elev);
    --bg-card-hover: var(--elev-2);
    --bg-elevated: var(--elev-2);

    --accent-cyan: var(--accent);
    --accent-cyan-glow: var(--accent-weak);
    --accent-cyan-hover: var(--accent-strong);
    --accent-magenta: #A78BFA;

    --text-primary: var(--fg);
    --text-secondary: var(--fg-muted);
    --text-muted: var(--fg-dim);

    --border-subtle: var(--border);
    --border-glow: var(--accent-weak);
}