/**
 * Loom design tokens.
 *
 * Source of truth: loom-mobile/src/theme/index.ts. Keep values in sync — when
 * the mobile theme changes, mirror it here so web/PDF/mobile stay visually
 * unified. Color names mirror the TS theme keys.
 *
 * Tokens are exposed as CSS custom properties under :root so any stylesheet
 * (including the new dkpdf print stylesheet later) can pick them up without
 * importing a preprocessor.
 */

:root {
    /* ── Brand color: navy wordmark + accent blue ─────────────────────── */
    /* The real wordmark stroke color from loom-logo.svg. Use this for the
       "loom" wordmark only — body text uses --color-navy below, which is the
       slightly cooler navy from the mobile theme. They're in the same family
       and read as one brand. */
    --color-wordmark: #2C5670;

    /* Mobile theme `colors.navy`. Body text + most surface text. */
    --color-navy: #27587C;
    --color-navy-dark: #1B3F58;

    /* Mobile theme `colors.accent`. CTAs, links, active states, focus. */
    --color-accent: #4489ED;
    --color-accent-dark: #2E6FCC;
    --color-accent-soft: #E7F0FE;

    /* Logo ring palette — useful for status/category tags. */
    --color-teal: #3FA9C9;
    --color-coral: #E07A68;
    --color-orange: #E88C5A;
    --color-green: #A8C956;

    /* ── Neutrals ─────────────────────────────────────────────────────── */
    --color-bg: #FFFFFF;
    --color-surface: #F5F7FA;
    --color-surface-elevated: #FFFFFF;
    --color-border: #E4E8EE;
    --color-border-strong: #CDD4DE;
    --color-text-muted: #6C7A8A;
    --color-text-subtle: #9AA5B2;

    /* ── Status colors ────────────────────────────────────────────────── */
    --color-danger: #D64545;
    --color-danger-soft: #FCE8E8;
    --color-warning: #E89B3B;
    --color-success: #2F9E6B;
    --color-success-soft: #E5F4ED;

    /* ── Spacing scale (mobile theme spacing.*) ───────────────────────── */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* ── Radii (mobile theme radius.*) ────────────────────────────────── */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* ── Elevation (mobile theme elevation.* boxShadow web variants) ──── */
    --shadow-card: 0 4px 12px rgba(10, 37, 64, 0.06);
    --shadow-modal: 0 12px 32px rgba(10, 37, 64, 0.12);

    /* ── Typography ───────────────────────────────────────────────────── */
    /* Web report uses Kadence's body font for prose; the mobile theme is
       system-default. Don't override body font here — just ensure sizes and
       weights stay in lockstep with the mobile typography scale. */
    --font-display-size: 40px;
    --font-display-line: 46px;
    --font-heading-size: 28px;
    --font-heading-line: 34px;
    --font-heading-sm-size: 20px;
    --font-heading-sm-line: 26px;
    --font-subheading-size: 16px;
    --font-subheading-line: 24px;
    --font-body-size: 15px;
    --font-body-line: 22px;
    --font-label-size: 13px;
    --font-label-tracking: 0.4px;
    --font-caption-size: 13px;
    --font-caption-line: 18px;
}