/*
 * Apeiron design tokens — 2022 Brand Guidelines (Quick Reference v1.0).
 *
 * --primary-color is deliberately NOT declared here: the base templates inject
 * it inline per-tenant from request.wl_config (whitelabel contract). Tokens may
 * reference it but must never redeclare it.
 */
:root {
    /* Brand palette */
    --brand-cyan: #33A9CA;
    --brand-blue: #4264FB;
    --brand-coal: #3A3A3A;
    --brand-white: #FFFFFF;

    /* Typography — Poppins for headings, Work Sans for body */
    --font-heading: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-body: 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* Neutrals */
    --color-text: var(--brand-coal);
    --color-text-muted: #6b7280;
    --color-heading: var(--brand-coal);
    --color-border: #e4e8ee;
    --color-border-strong: #d3dae2;
    --color-surface: #ffffff;
    --color-surface-alt: #f6f8fa;

    /* Semantic accents (independent of tenant primary) */
    --color-action: var(--brand-blue);
    --color-action-hover: #2e4fe0;
    --color-danger: #d64545;

    /* Interaction states derived from the tenant primary. Browsers without
       color-mix() leave these unset — consumers must provide a fallback. */
    --primary-hover: color-mix(in srgb, var(--primary-color) 85%, #000);
    --primary-soft: color-mix(in srgb, var(--primary-color) 14%, transparent);

    /* Shape & elevation */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.10);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.16);

    --transition-fast: 150ms ease;
}