/* Compath Design System — tokens.css
 * GENERATED from docs/design-system/tokens/compath.tokens.json — do not edit by hand.
 * Custom-property names match the semantic token names 1:1 (the naming contract
 * shared with SwiftUI Theme/ and Figma variables). Light is :root; Dark overrides
 * the semantic layer only.
 *
 * Font: Nunito is the official brand typeface across ALL targets. Bundled locally
 * (fonts/Nunito.ttf, OFL) — no external dependency. iOS reuses the same .ttf. */
@font-face {
  font-family: 'Nunito';
  src: url('Nunito.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Primitives: coral ---- */
  --coral-50:#FFF1EE; --coral-100:#FFE0DA; --coral-200:#FFC7BD; --coral-300:#FFA89B;
  --coral-400:#FF8C7B; --coral-500:#FF7363; --coral-600:#ED5A48; --coral-700:#C9412F;
  --coral-800:#9E2E1F; --coral-900:#6E1D12;
  /* ---- Primitives: neutral (warm) ---- */
  --neutral-50:#FBF6F2; --neutral-100:#F3ECE6; --neutral-200:#E7DCD3; --neutral-300:#D6C8BD;
  --neutral-400:#B7A89C; --neutral-500:#97877B; --neutral-600:#756659; --neutral-700:#574A40;
  --neutral-800:#3A2F28; --neutral-900:#221A14;
  /* ---- Primitives: teal ---- */
  --teal-50:#ECF8F5; --teal-100:#D2EFE8; --teal-200:#A8E0D4; --teal-300:#74CBBA;
  --teal-400:#46B3A0; --teal-500:#2C9C8C; --teal-600:#1F7A6E; --teal-700:#185F56;
  --teal-800:#114440; --teal-900:#0B2C2A;
  /* ---- Primitives: functional ---- */
  --fn-success:#2F9E6B; --fn-successBright:#4FBF8A; --fn-warning:#E59A3C; --fn-warningBright:#F2B45C;
  --fn-error:#E05343; --fn-errorBright:#FF7E6E; --fn-info:#3E8FD1; --fn-infoBright:#6BB0E6;
  --fn-gold:#F4B740; --fn-goldBright:#FFC857; --fn-coralBright:#FF8676; --fn-coralTintDark:#FFC0B6;
  --fn-white:#FFFFFF; --fn-inkOnCoralDark:#2B1A16; --fn-ink:#2B2421; --fn-inkSoft:#6E6157;
  --fn-inkFaint:#A89C93; --fn-paperLight:#F5EEE8; --fn-paperSoft:#B9ABA1; --fn-paperFaint:#7E726A;
  --fn-surfaceDark:#161311; --fn-surfaceDark2:#1F1A17; --fn-groupedDark:#110E0C; --fn-btnSecDark:#2A231F;
  --fn-btnDisabledDark:#332B26; --fn-linkDark:#5FCFA8; --fn-compatLow:#9B8F86; --fn-compatLowDark:#8A7E74;

  /* ---- Semantic (Light) — aliases to primitives ---- */
  --appPrimary: var(--coral-500);
  --appPrimaryLight: var(--coral-300);
  --appPrimaryDark: var(--coral-700);
  --appSecondary: var(--teal-500);
  --textPrimary: var(--fn-ink);
  --textSecondary: var(--fn-inkSoft);
  --textTertiary: var(--fn-inkFaint);
  --textOnPrimary: var(--fn-white);
  --backgroundPrimary: var(--fn-white);
  --backgroundSecondary: var(--neutral-50);
  --backgroundGrouped: var(--neutral-100);
  --buttonPrimary: var(--coral-500);
  --buttonSecondary: var(--neutral-100);
  --buttonDisabled: var(--neutral-200);
  --link: var(--teal-600);
  --rating: var(--fn-gold);
  --statusSuccess: var(--fn-success);
  --statusWarning: var(--fn-warning);
  --statusError: var(--fn-error);
  --statusInfo: var(--fn-info);
  --compatibilityHigh: var(--fn-success);
  --compatibilityMedium: var(--fn-warning);
  --compatibilityLow: var(--fn-compatLow);
  --borderSubtle: var(--neutral-200);
  --borderStrong: var(--fn-ink);
  /* Translucent backdrop behind modal sheets (mirrors Color.scrim) */
  --scrim: color-mix(in srgb, var(--fn-ink) 40%, transparent);

  /* ---- Spacing ---- */
  --space-xxSmall:2px; --space-xSmall:4px; --space-small:8px; --space-medium:12px;
  --space-large:16px; --space-xLarge:20px; --space-xxLarge:24px; --space-xxxLarge:32px; --space-huge:40px;

  /* ---- Radius ---- */
  --radius-small:6px; --radius-medium:10px; --radius-large:12px; --radius-xLarge:16px;
  --radius-xxLarge:24px; --radius-full:999px; --radius-sheet:20px;

  /* ---- Icon size (point size for glyphs; mirrors LayoutTheme.IconSize) ---- */
  --icon-xxSmall:11px; --icon-xSmall:14px; --icon-small:16px; --icon-medium:20px;
  --icon-large:22px; --icon-xLarge:34px; --icon-xxLarge:64px;

  /* ---- Avatar size (mirrors LayoutTheme.AvatarSize) ---- */
  --avatar-micro:28px; --avatar-xxSmall:40px; --avatar-xSmall:44px; --avatar-small:48px; --avatar-medium:56px;
  --avatar-large:60px; --avatar-xLarge:80px; --avatar-xxLarge:96px; --avatar-editBadge:36px;

  /* ---- Control height (mirrors LayoutTheme.ControlHeight + BrandButton sizes) ---- */
  --control-sm:36px; --control-md:44px; --control-lg:52px; --control-field:50px;

  /* ---- Border width (mirrors LayoutTheme.BorderWidth) ---- */
  --border-thin:1px; --border-medium:2px;

  /* ---- Typography ---- */
  --font-primary:"Nunito",-apple-system,system-ui,sans-serif;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-heavy:800; --weight-black:900;
  /* Type scale — single source of the numeric sizes (mirrors BrandFont.Size in the app,
     and the .t-* roles below). Mocks reference these vars, never literal px. */
  --fs-display:34px; --fs-title:28px; --fs-headline:22px; --fs-subheadline:17px; --fs-body:17px;
  --fs-callout:16px; --fs-label:15px; --fs-caption:13px; --fs-caption2:11px;

  /* ---- Motion ---- */
  --duration-quick:150ms; --duration-standard:250ms; --duration-gentle:400ms;
  --ease-signature:cubic-bezier(0.34,1.2,0.64,1); --ease-standard:cubic-bezier(0.4,0,0.2,1);

  /* ---- Elevation (soft, warm) ---- */
  --elevation-e0:0 1px 2px rgba(43,36,33,.06);
  --elevation-e1:0 4px 14px rgba(43,36,33,.08);
  --elevation-e2:0 10px 28px rgba(43,36,33,.12);
  --elevation-e3:0 10px 30px rgba(255,115,99,.34); /* coral glow */
}

/* ---- Semantic (Dark) — overrides only the semantic layer ---- */
:root[data-theme="dark"] {
  --appPrimary: var(--fn-coralBright);
  --appPrimaryLight: var(--fn-coralTintDark);
  --appPrimaryDark: var(--coral-600);
  --appSecondary: var(--teal-400);
  --textPrimary: var(--fn-paperLight);
  --textSecondary: var(--fn-paperSoft);
  --textTertiary: var(--fn-paperFaint);
  --textOnPrimary: var(--fn-inkOnCoralDark);
  --backgroundPrimary: var(--fn-surfaceDark);
  --backgroundSecondary: var(--fn-surfaceDark2);
  --backgroundGrouped: var(--fn-groupedDark);
  --buttonPrimary: var(--fn-coralBright);
  --buttonSecondary: var(--fn-btnSecDark);
  --buttonDisabled: var(--fn-btnDisabledDark);
  --link: var(--fn-linkDark);
  --rating: var(--fn-goldBright);
  --statusSuccess: var(--fn-successBright);
  --statusWarning: var(--fn-warningBright);
  --statusError: var(--fn-errorBright);
  --statusInfo: var(--fn-infoBright);
  --compatibilityHigh: var(--fn-successBright);
  --compatibilityMedium: var(--fn-warningBright);
  --compatibilityLow: var(--fn-compatLowDark);
  --borderSubtle: var(--fn-btnSecDark);
  --borderStrong: var(--fn-paperLight);
  --scrim: color-mix(in srgb, #000 60%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --appPrimary: var(--fn-coralBright); --appPrimaryLight: var(--fn-coralTintDark);
    --appPrimaryDark: var(--coral-600); --appSecondary: var(--teal-400);
    --textPrimary: var(--fn-paperLight); --textSecondary: var(--fn-paperSoft);
    --textTertiary: var(--fn-paperFaint); --textOnPrimary: var(--fn-inkOnCoralDark);
    --backgroundPrimary: var(--fn-surfaceDark); --backgroundSecondary: var(--fn-surfaceDark2);
    --backgroundGrouped: var(--fn-groupedDark); --buttonPrimary: var(--fn-coralBright);
    --buttonSecondary: var(--fn-btnSecDark); --buttonDisabled: var(--fn-btnDisabledDark);
    --link: var(--fn-linkDark); --rating: var(--fn-goldBright);
    --statusSuccess: var(--fn-successBright); --statusWarning: var(--fn-warningBright);
    --statusError: var(--fn-errorBright); --statusInfo: var(--fn-infoBright);
    --compatibilityHigh: var(--fn-successBright); --compatibilityMedium: var(--fn-warningBright);
    --compatibilityLow: var(--fn-compatLowDark); --scrim: color-mix(in srgb, #000 60%, transparent);
    --borderSubtle: var(--fn-btnSecDark); --borderStrong: var(--fn-paperLight);
  }
}

/* ---- Brand motion (reusable keyframes) ---- */
@keyframes compathFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes compathPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.8}}
@keyframes compathRipple{0%{transform:scale(.6);opacity:.5}100%{transform:scale(1.9);opacity:0}}
@keyframes compathShimmer{0%{background-position:-360px 0}100%{background-position:360px 0}}

/* ---- Type-role utility classes ----
   Sizes match the screen mocks rendered at real device width (.phone = 390px).
   Warm-editorial voice: display/title are heavy and tight (the loud register),
   everything below subheadline stays quiet — the contrast IS the character. */
.t-display{font:var(--weight-heavy) var(--fs-display)/38px var(--font-primary);letter-spacing:-0.8px;}
.t-title{font:var(--weight-heavy) var(--fs-title)/32px var(--font-primary);letter-spacing:-0.6px;}
.t-headline{font:var(--weight-bold) var(--fs-headline)/28px var(--font-primary);letter-spacing:-0.3px;}
.t-subheadline{font:var(--weight-bold) var(--fs-subheadline)/22px var(--font-primary);letter-spacing:-0.1px;}
.t-body{font:var(--weight-regular) var(--fs-body)/24px var(--font-primary);}
.t-callout{font:var(--weight-bold) var(--fs-callout)/21px var(--font-primary);}
.t-caption{font:var(--weight-semibold) var(--fs-caption)/18px var(--font-primary);letter-spacing:0.3px;}
/* Editorial overline — the section-label voice (uppercase, tracked out) */
.t-overline{font:var(--weight-bold) var(--fs-caption2)/14px var(--font-primary);text-transform:uppercase;letter-spacing:1.2px;}