/* SmartClinic design tokens (generated from packages/tokens/tokens.json — Stripe theme).
 * The app's theme variables (styles.css :root) map onto these, so the whole app
 * re-skins by changing tokens.json and regenerating. Do not edit by hand. */
:root {
  /* primitives — do not consume directly; use the semantic tokens below */
  --p-ink-950: #082036;
  --p-ink-900: #0A2540;
  --p-ink-800: #1A3A5C;
  --p-ink-600: #425466;
  --p-ink-400: #8898AA;
  --p-line-200: #E3E8EE;
  --p-line-100: #EEF2F6;
  --p-page: #F6F9FC;
  --p-surface-050: #FBFCFE;
  --p-white: #FFFFFF;
  --p-accent-700: #5546E0;
  --p-accent-600: #635BFF;
  --p-accent-050: #F1F0FE;
  --p-amber-700: #B45309;
  --p-amber-050: #FEF3C7;
  --p-red-700: #BE123C;
  --p-red-050: #FFE4E6;
  --p-violet-700: #6D28D9;
  --p-violet-050: #EDE9FE;
  --p-green-700: #15803D;
  --p-green-050: #DCFCE7;

  /* semantic: color (role-based — the public API) */
  --color-surface-page: var(--p-page);
  --color-surface-panel: var(--p-white);
  --color-surface-nav: var(--p-line-100);
  --color-surface-chrome: var(--p-ink-950);
  --color-surface-selected: var(--p-accent-050);
  --color-surface-stripe: var(--p-surface-050);
  --color-text-primary: var(--p-ink-900);
  --color-text-secondary: var(--p-ink-600);
  --color-text-muted: var(--p-ink-400);
  --color-text-on-chrome: var(--p-white);
  --color-text-link: var(--p-accent-600);
  --color-border-default: var(--p-line-200);
  --color-border-subtle: var(--p-line-100);
  --color-border-focus: var(--p-accent-600);
  --color-action-primary: var(--p-accent-600);
  --color-action-primary-hover: var(--p-accent-700);
  --color-status-caution-fg: var(--p-amber-700);
  --color-status-caution-bg: var(--p-amber-050);
  --color-status-risk-fg: var(--p-red-700);
  --color-status-risk-bg: var(--p-red-050);
  --color-status-research-fg: var(--p-violet-700);
  --color-status-research-bg: var(--p-violet-050);
  --color-status-clear-fg: var(--p-green-700);
  --color-status-clear-bg: var(--p-green-050);

  /* semantic: radius + shadow */
  --radius-token-sm: 6px;
  --radius-token-md: 10px;
  --shadow-card: 0 1px 2px rgba(10, 37, 64, 0.05);
  --shadow-overlay: 0 4px 12px rgba(10, 37, 64, 0.08);
  --shadow-overlay-lg: 0 12px 28px rgba(10, 37, 64, 0.12);
}

/* Dark theme — SmartClinic tokens on a deep cool-navy base (Stripe/Linear dark). */
:root[data-theme="dark"] {
  --color-surface-page: #0B1120;
  --color-surface-panel: #141B2D;
  --color-surface-nav: #1B2438;
  --color-surface-chrome: #060A14;
  --color-surface-selected: #232A50;
  --color-surface-stripe: #121A2B;
  --color-text-primary: #E6EDF6;
  --color-text-secondary: #9BA8BF;
  --color-text-muted: #66768F;
  --color-text-on-chrome: #FFFFFF;
  --color-text-link: #8C86FF;
  --color-border-default: #283349;
  --color-border-subtle: #1E2740;
  --color-border-focus: #7C74FF;
  --color-action-primary: #6C63FF;
  --color-action-primary-hover: #837BFF;
  --color-status-caution-fg: #E8B368; --color-status-caution-bg: #2A2212;
  --color-status-risk-fg: #F7889B;    --color-status-risk-bg: #2C1622;
  --color-status-research-fg: #B6A8F2; --color-status-research-bg: #221E3C;
  --color-status-clear-fg: #62D397;   --color-status-clear-bg: #12271C;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-overlay-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --color-surface-page: #0B1120;
    --color-surface-panel: #141B2D;
    --color-surface-nav: #1B2438;
    --color-surface-chrome: #060A14;
    --color-surface-selected: #232A50;
    --color-surface-stripe: #121A2B;
    --color-text-primary: #E6EDF6;
    --color-text-secondary: #9BA8BF;
    --color-text-muted: #66768F;
    --color-text-on-chrome: #FFFFFF;
    --color-text-link: #8C86FF;
    --color-border-default: #283349;
    --color-border-subtle: #1E2740;
    --color-border-focus: #7C74FF;
    --color-action-primary: #6C63FF;
    --color-action-primary-hover: #837BFF;
    --color-status-caution-fg: #E8B368; --color-status-caution-bg: #2A2212;
    --color-status-risk-fg: #F7889B;    --color-status-risk-bg: #2C1622;
    --color-status-research-fg: #B6A8F2; --color-status-research-bg: #221E3C;
    --color-status-clear-fg: #62D397;   --color-status-clear-bg: #12271C;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-overlay: 0 4px 14px rgba(0, 0, 0, 0.5);
    --shadow-overlay-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
  }
}