/**
 * Northstar Medical — Design Tokens (web)
 *
 * GENERATED FILE — DO NOT EDIT.
 * Source of truth: Figma (Variables) → Tokens Studio for Figma plugin →
 *                  design-system/figma/tokens.json → this file.
 * Regenerate:      cd design-system && npm run tokens:build
 *
 * The same figma/tokens.json also produces
 *   northstar-ios/HealixApp/Core/Design/NorthstarTokens.swift
 * so the web patient portal and the iOS app stay in lockstep.
 *
 * Edit rules:
 *   1. NEVER hardcode hex colors or px sizes anywhere in the codebase.
 *      Always reference a CSS variable from this file (e.g.
 *      `color: var(--color-primary)`).
 *   2. NEVER edit this file. Edit Variables in Figma; the Tokens Studio
 *      plugin opens a PR against design-system/figma/tokens.json.
 *   3. NEVER add a new token with the same role under a different name
 *      (e.g. don't add --space-huge; extend --space-3xl instead).
 */

:root {
  --color-paper: #fcf8ee;
  --color-linen: #f7efdc;
  --color-dawn: #f6d98a;
  --color-sunshine: #f4b41a;
  --color-sunshine-deep: #b58300;
  --color-ink: #070b1e;
  --color-dusk: #0e1843;
  --color-mist: #f1e2bc;
  --color-umber: #8b6d42;
  --color-sand: #ab8a5a;
  --color-night-bg: var(--color-dusk);
  --color-night-chrome: var(--color-ink);
  --color-night-text: var(--color-paper);
  --color-primary: var(--color-ink);
  --color-primary-dark: var(--color-dusk);
  --color-primary-light: var(--color-dawn);
  --color-primary-bg: var(--color-linen);
  --color-secondary: var(--color-sunshine);
  --color-secondary-dark: var(--color-sunshine-deep);
  --color-secondary-light: var(--color-dawn);
  --color-black: var(--color-ink);
  --color-white: var(--color-paper);
  --color-gray-100: var(--color-linen);
  --color-gray-200: var(--color-mist);
  --color-gray-300: #e5e5ea;
  --color-gray-400: #d2d2d7;
  --color-gray-500: #c7c7cc;
  --color-gray-600: #98989d;
  --color-gray-700: #86868b;
  --color-gray-800: #48484a;
  --color-gray-900: #1a2e35;
  --color-success: #346d0c;
  --color-success-bg: #e8f3dc;
  --color-success-fg: #346d0c;
  --color-warning: var(--color-sunshine);
  --color-warning-bg: #fff8e0;
  --color-warning-fg: var(--color-sunshine-deep);
  --color-error: #ff3b30;
  --color-error-bg: #ffe5e5;
  --color-error-fg: #cc0000;
  --color-info: #3b63fb;
  --color-info-bg: #e8eefe;
  --color-info-fg: #2f4fe0;
  --color-bg-base: var(--color-paper);
  --color-bg-surface: var(--color-white);
  --color-bg-raised: var(--color-white);
  --color-bg-muted: var(--color-linen);
  --color-text-primary: var(--color-ink);
  --color-text-secondary: #4c4d58;
  --color-text-muted: #696a71;
  --color-text-on-primary: var(--color-white);
  --color-border: var(--color-mist);
  --color-border-strong: var(--color-gray-400);
  --color-border-subtle: rgba(7, 11, 30, 0.06);
  --gradient-sunrise-field: linear-gradient(to bottom, var(--color-paper) 0%, var(--color-paper) 20%, var(--color-linen) 50%, var(--color-dawn) 78%, var(--color-sunshine) 100%);
  --gradient-sunrise-field-from-right: linear-gradient(to bottom right, var(--color-paper) 0%, var(--color-paper) 20%, var(--color-linen) 50%, var(--color-dawn) 78%, var(--color-sunshine) 100%);
  --font-display: Figtree, system-ui, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  --font-serif: Figtree, system-ui, sans-serif;
  --text-hero: 72px;
  --text-h1: 48px;
  --text-h2: 32px;
  --text-h3: 24px;
  --text-h4: 20px;
  --text-body-lg: 19px;
  --text-body: 17px;
  --text-sm: 14px;
  --text-xs: 12px;
  --weight-bold: 700;
  --weight-semibold: 600;
  --weight-medium: 500;
  --weight-regular: 400;
  --weight-light: 300;
  --tracking-tight: -0.03em;
  --tracking-normal: -0.01em;
  --tracking-wide: 0;
  --leading-tight: 1.08;
  --leading-snug: 1.2;
  --leading-normal: 1.47;
  --leading-relaxed: 1.6;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --space-2xl: 120px;
  --space-3xl: 160px;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;
  --shadow-xs: 0 1px 2px rgba(7, 11, 30, 0.04);
  --shadow-sm: 0 2px 8px rgba(7, 11, 30, 0.06);
  --shadow-md: 0 4px 12px rgba(7, 11, 30, 0.08);
  --shadow-lg: 0 8px 24px rgba(7, 11, 30, 0.10);
  --shadow-xl: 0 12px 40px rgba(7, 11, 30, 0.12);
  --shadow-focus: 0 0 0 4px var(--focus-ring-color);
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --container-max: 1200px;
  --container-wide: 1400px;
  --section-padding: 80px 24px;
  --sidebar-width: 256px;
  --sidebar-width-collapsed: 64px;
  --header-height: 64px;
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-toast: 600;
  --z-tooltip: 700;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-primary);
  --button-height-sm: 36px;
  --button-height-md: 44px;
  --button-height-lg: 52px;
  --button-radius: var(--radius-full);
  --input-height: 44px;
  --input-padding-x: var(--space-sm);
  --input-padding-y: var(--space-xs);
  --input-radius: var(--radius-sm);
  --input-border: var(--color-border);
  --input-border-focus: var(--color-primary);
  --top-bar-search-max-width: 480px;
  --card-padding: var(--space-md);
  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-sm);
  --card-border: 1px solid rgba(7, 11, 30, 0.06);
  --card-border-color: var(--color-border-subtle);
  --modal-radius: var(--radius-lg);
  --modal-shadow: var(--shadow-xl);
  --modal-overlay-bg: rgba(7, 11, 30, 0.4);
  --avatar-size-xs: 24px;
  --avatar-size-sm: 32px;
  --avatar-size-md: 40px;
  --avatar-size-lg: 56px;
  --avatar-size-xl: 80px;
}


/* ============================================================
   RESPONSIVE OVERRIDES — re-tune the SCALE on smaller viewports
   (DO NOT introduce new tokens here; only re-tune existing ones)
   ============================================================ */

@media (max-width: 1024px) {
  :root {
    --text-hero: 56px;
    --text-h1: 40px;
    --text-h2: 28px;
    --section-padding: var(--space-lg) var(--space-md);
  }
}

@media (max-width: 640px) {
  :root {
    --text-hero: 40px;
    --text-h1: 32px;
    --text-h2: 24px;
    --space-xl: 48px;
    --space-2xl: 64px;
  }
}

/* Wide formats: the field still rises from the bottom and enters from the right. */
@media (min-width: 1024px) {
  :root {
    --gradient-sunrise-field: var(--gradient-sunrise-field-from-right);
  }
}