/* ════════════════════════════════════════════════════════════════
   HIPAA Made Simple — Design Tokens
   "If Apple did HIPAA": calm, confident, obsessive craft.
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* Inter — uploaded brand fonts. Static weights, 18pt optical-size cut (body default).
   For larger sizes, the 24pt/28pt cuts are available via the .display-24 / .display-28
   utility classes. */
@font-face { font-family: 'Inter'; font-style: normal;  font-weight: 100; src: url('fonts/Inter_18pt-Thin.ttf')        format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic;  font-weight: 100; src: url('fonts/Inter_18pt-ThinItalic.ttf')  format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal;  font-weight: 200; src: url('fonts/Inter_18pt-ExtraLight.ttf')  format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic;  font-weight: 200; src: url('fonts/Inter_18pt-ExtraLightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal;  font-weight: 300; src: url('fonts/Inter_18pt-Light.ttf')       format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic;  font-weight: 300; src: url('fonts/Inter_18pt-LightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal;  font-weight: 400; src: url('fonts/Inter_18pt-Regular.ttf')     format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic;  font-weight: 400; src: url('fonts/Inter_18pt-Italic.ttf')      format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal;  font-weight: 500; src: url('fonts/Inter_18pt-Medium.ttf')      format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal;  font-weight: 600; src: url('fonts/Inter_18pt-SemiBold.ttf')    format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic;  font-weight: 600; src: url('fonts/Inter_18pt-SemiBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal;  font-weight: 700; src: url('fonts/Inter_18pt-Bold.ttf')        format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic;  font-weight: 700; src: url('fonts/Inter_18pt-BoldItalic.ttf')  format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal;  font-weight: 900; src: url('fonts/Inter_18pt-Black.ttf')       format('truetype'); font-display: swap; }

/* Inter Display — 24pt optical-size cut, for headings ~22–44px */
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 400; src: url('fonts/Inter_24pt-Regular.ttf')  format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 500; src: url('fonts/Inter_24pt-Medium.ttf')   format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 700; src: url('fonts/Inter_24pt-Bold.ttf')     format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 800; src: url('fonts/Inter_24pt-ExtraBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 900; src: url('fonts/Inter_24pt-Black.ttf')    format('truetype'); font-display: swap; }

/* Inter Hero — 28pt optical-size cut, for display ≥48px */
@font-face { font-family: 'Inter Hero'; font-style: normal; font-weight: 600; src: url('fonts/Inter_28pt-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Hero'; font-style: normal; font-weight: 800; src: url('fonts/Inter_28pt-ExtraBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Hero'; font-style: normal; font-weight: 900; src: url('fonts/Inter_28pt-Black.ttf')    format('truetype'); font-display: swap; }

:root {
  /* ─── CANVAS — warm off-white, never pure white ─── */
  --canvas:        #FAF8F5;  /* primary surface */
  --canvas-raised: #FFFFFF;  /* cards, elevated panels */
  --canvas-sunken: #F3F0EB;  /* input wells, subtle inset */
  --canvas-ink:    #141413;  /* dark surface (footers, final CTA) */

  /* ─── INK — near-black, never pure black ─── */
  --fg-1: #141413;  /* primary text, headlines */
  --fg-2: #3C3A37;  /* body text */
  --fg-3: #6B665E;  /* secondary, captions */
  --fg-4: #9A948A;  /* tertiary, placeholders */
  --fg-inverse: #FAF8F5;

  /* ─── ACCENT — muted coral (the single restrained accent) ─── */
  --accent:        #D97757;
  --accent-hover:  #C86644;
  --accent-press:  #B5583A;
  --accent-soft:   #F5E3DA;  /* tint bg for selected rows, chips */
  --accent-ink:    #6E3420;  /* accent text on accent-soft */

  /* ─── SEMANTIC — status only, not decoration ─── */
  --success:     #3D7A4C;
  --success-soft:#E4EEDF;
  --warning:     #B8812B;
  --warning-soft:#F5EAD0;
  --danger:      #A8392C;  /* reserved: active breaches only */
  --danger-soft: #F2DCD8;
  --info:        --fg-2;   /* deliberate — no healthcare blue */

  /* ─── HAIRLINES — 1px borders over heavy shadows ─── */
  --border:        rgba(20, 20, 19, 0.10);
  --border-strong: rgba(20, 20, 19, 0.18);
  --border-focus:  var(--accent);

  /* ─── SHADOWS — for elevated surfaces only (modals, popovers) ─── */
  --shadow-1: 0 1px 2px rgba(20, 20, 19, 0.04);
  --shadow-2: 0 4px 12px -2px rgba(20, 20, 19, 0.06), 0 2px 4px rgba(20, 20, 19, 0.04);
  --shadow-3: 0 12px 32px -4px rgba(20, 20, 19, 0.10), 0 4px 8px rgba(20, 20, 19, 0.05);
  --shadow-4: 0 24px 60px -8px rgba(20, 20, 19, 0.16), 0 8px 16px rgba(20, 20, 19, 0.06);

  /* ─── RADII — 8–12, not pill-shaped ─── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;

  /* ─── SPACING — 4px base ─── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ─── TYPOGRAPHY ─── */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --font-display: 'Inter Display', 'Inter', system-ui, sans-serif;
  --font-hero:    'Inter Hero', 'Inter Display', 'Inter', system-ui, sans-serif;
  --font-serif:   'Instrument Serif', 'New York', 'Tiempos Text', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --font-numeric: 'Inter', system-ui, sans-serif;

  --tracking-tight: -0.035em;
  --tracking-snug:  -0.02em;
  --tracking-normal: -0.005em;
  --tracking-wide:  0.06em;

  --leading-tight: 1.1;
  --leading-snug:  1.3;
  --leading-body:  1.5;
  --leading-loose: 1.65;

  /* ─── MOTION — spring-based, subtle ─── */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
}

/* ════════════════════════════════════════════════════════════════
   SEMANTIC TYPE STYLES
   ════════════════════════════════════════════════════════════════ */

html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: var(--leading-body);
  color: var(--fg-2);
  background: var(--canvas);
  font-feature-settings: 'ss01', 'cv11';
}

.display {
  font-family: var(--font-serif);
  font-size: clamp(56px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  font-weight: 400;
}

.h1 {
  font-family: var(--font-hero);
  font-size: clamp(40px, 5vw, 56px);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  font-weight: 700;
}

.h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  font-weight: 700;
}

.h3 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  font-weight: 600;
}

.h4 {
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: var(--tracking-normal);
  color: var(--fg-1);
  font-weight: 600;
}

.body-lg {
  font-size: 17px;
  line-height: var(--leading-loose);
  color: var(--fg-2);
}

.body {
  font-size: 15px;
  line-height: var(--leading-body);
  color: var(--fg-2);
}

.body-sm {
  font-size: 13px;
  line-height: var(--leading-body);
  color: var(--fg-3);
}

.caption {
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg-3);
  letter-spacing: 0.01em;
}

.eyebrow {
  font-size: 11px;
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 600;
}

.numeric {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

.serif-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 28px;
  line-height: 1.3;
  color: var(--fg-1);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-1);
  background: var(--canvas-sunken);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* Focus ring — intentional, not browser default */
.focus-ring:focus-visible,
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}