/*
 * Website design tokens (public pages).
 * Source: ui deisgns/website ui/minimalist-swiss-design.md
 * Reference: docs/design/tokens.md
 * Rules: accent color is interactive-only; no pure black; no emoji icons
 * (icons come from /icons/*.svg). Motion: 150-250ms ease-out, transform and
 * opacity only.
 */

:root {
    /* Color - semantic only */
    --color-surface: #FFFFFF;
    --color-surface-alt: #F8F8F8;
    --color-accent: #007BFF;
    --color-accent-hover: #0069D9;
    --color-ink: #212529;
    --color-muted: #6C757D;
    --color-border: #E9ECEF;
    --color-success: #28A745;
    --color-warning: #FFC107;
    --color-danger: #DC3545;

    /* Typography */
    --font-sans: 'Inter Tight', 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Typography weight - light editorial hierarchy, never heavy by default. */
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    /* Shape */
    --radius-sm: 2px;
    --radius-md: 6px;
    --radius-lg: 8px;

    /* Spacing (base unit 8px) */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;

    /* Layout */
    --container-max: 1280px;
    --container-pad: 24px;

    /* Elevation - subtle only */
    --shadow-card: 0 1px 8px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.06);

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 150ms;
    --dur-base: 200ms;

    /* z-index contract: nav 100 / overlay 200 / modal 300 / toast 500 */
    --z-nav: 100;
    --z-overlay: 200;
    --z-modal: 300;
    --z-toast: 500;
}