/* ============================================================
   EnhancedDx Design System — Colors & Type
   "The Clinical Ledger" — editorial, spacious, meticulous
   ============================================================ */

/* ---- Web fonts ------------------------------------------------ */
@font-face {
  font-family: "Raleway";
  src: url("fonts/Raleway-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("fonts/Raleway-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("fonts/Quicksand-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/DMMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/DMMono-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* ---- Primary / brand ------------------------------------ */
  --primary:                 #41034d;   /* deep authority — headlines, key icons, text */
  --on-primary:              #ffffff;
  --primary-container:       #f3ecf6;   /* very faint lavender — buttons, filled surfaces */
  --on-primary-container:    #41034d;   /* deep purple sits on the pastel */
  --primary-accent:          #2a9cb3;   /* TEAL — contrasting accent, highlights */

  /* ---- Secondary — clinical teal -------------------------- */
  --secondary:               #2a9cb3;   /* "Positive/Active" status */
  --on-secondary:            #ffffff;
  --secondary-container:     #c9f0f8;   /* soft teal pastel */
  --on-secondary-container:  #0e5a69;

  /* ---- Tertiary — warm neutral mauve ---------------------- */
  --tertiary:                #8a6a8f;
  --on-tertiary:             #ffffff;
  --tertiary-container:      #f0dff3;   /* Neutral/Inactive chips */
  --on-tertiary-container:   #4a2f4f;

  /* ---- Semantic feedback ---------------------------------- */
  --success:                 #2e8f6b;
  --on-success:              #ffffff;
  --success-container:       #c9efdd;
  --on-success-container:    #0e4a33;

  --warning:                 #b97a15;
  --on-warning:              #ffffff;
  --warning-container:       #fbe6bc;
  --on-warning-container:    #5a3a02;

  --error:                   #b3261e;
  --on-error:                #ffffff;
  --error-container:         #f9dedc;
  --on-error-container:      #601410;

  /* ---- Surfaces — warm-neutral off-white ladder ----------- */
  --surface:                 #fafaf7;   /* base page — off-white, faint warm cast */
  --surface-container-lowest:#ffffff;   /* highest "lift" — pure white cards on top */
  --surface-container-low:   #f4f3ef;   /* subtle panel */
  --surface-container:       #eeece7;   /* mid depth */
  --surface-container-high:  #e7e4dd;   /* inputs, filled fields */
  --surface-container-highest:#dfdbd2;  /* strong zone, selected row */

  --on-surface:              #1f1a1f;   /* body text — NEVER use #000 */
  --on-surface-variant:      #6a6560;   /* secondary text, metadata */

  --outline:                 #8a857e;   /* strong divider (rare) */
  --outline-variant:         #c7c2b9;   /* "ghost border" — use at 20% opacity */

  --inverse-surface:         #2a2528;
  --on-inverse-surface:      #f4f3ef;
  --inverse-primary:         #e0a8ec;

  /* ---- Gradients — pastel, not dark ----------------------- */
  --gradient-primary:        linear-gradient(165deg, #f4e5fa 0%, #d9efff 100%);  /* lavender → soft teal */
  --gradient-primary-soft:   linear-gradient(165deg, #ecd6f5 0%, #c9f0f8 100%);  /* hover — slightly deeper */
  --gradient-ink:            linear-gradient(180deg, #5a1f64 0%, #41034d 100%);  /* legacy deep (reserved) */
  --gradient-lavender-glass: linear-gradient(160deg, rgba(231,211,240,0.55) 0%, rgba(201,240,248,0.35) 100%);

  /* ---- Elevation — tonal shadows (not drop shadows) ------- */
  --shadow-ambient:          0px 12px 32px rgba(31, 26, 31, 0.06);
  --shadow-ambient-sm:       0px 6px 16px rgba(31, 26, 31, 0.05);
  --shadow-floating:         0px 20px 48px rgba(31, 26, 31, 0.10);

  /* ---- Glass / blur --------------------------------------- */
  --blur-chrome:             blur(16px);
  --glass-surface:           rgba(250, 250, 247, 0.72);
  --glass-surface-strong:    rgba(250, 250, 247, 0.88);
  --glass-primary:           rgba(65, 3, 77, 0.78);

  /* ---- Radii — only 8 or full ----------------------------- */
  --radius-xs:               4px;
  --radius-sm:               8px;    /* DEFAULT — buttons, cards, inputs */
  --radius-md:               12px;   /* only for stacked outer containers */
  --radius-lg:               20px;   /* hero surfaces */
  --radius-full:             9999px; /* chips + search bars only */

  /* ---- Spacing scale -------------------------------------- */
  --space-2xs:               4px;
  --space-xs:                8px;
  --space-sm:                12px;
  --space-md:                16px;
  --space-lg:                24px;
  --space-xl:                32px;   /* canonical list gap */
  --space-2xl:               48px;
  --space-3xl:               72px;   /* section breathing room */
  --space-4xl:               112px;

  /* ---- Typography — families ------------------------------ */
  --font-display:            "Raleway", ui-sans-serif, system-ui, sans-serif;
  --font-body:               "Quicksand", ui-sans-serif, system-ui, sans-serif;
  --font-mono:               "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Typography — sizes (editorial scale) --------------- */
  --display-lg:              3.5rem;    /* 56px hero moments */
  --display-md:              2.75rem;   /* 44px */
  --display-sm:              2.25rem;   /* 36px */
  --headline-lg:             2rem;      /* 32px */
  --headline-md:             1.5rem;    /* 24px */
  --headline-sm:             1.25rem;   /* 20px */
  --title-lg:                1.125rem;  /* 18px — card titles */
  --title-md:                1rem;      /* 16px */
  --body-lg:                 1.0625rem; /* 17px — reading */
  --body-md:                 1rem;      /* 16px */
  --body-sm:                 0.875rem;  /* 14px */
  --label-md:                0.8125rem; /* 13px mono */
  --label-sm:                0.6875rem; /* 11px mono all-caps */

  --leading-tight:           1.12;
  --leading-snug:            1.28;
  --leading-normal:          1.5;
  --leading-loose:           1.7;

  --tracking-tight:          -0.02em;   /* for display */
  --tracking-normal:         0;
  --tracking-wide:           0.08em;    /* mono labels */
  --tracking-widest:         0.14em;    /* tiny all-caps */

  /* ---- Motion --------------------------------------------- */
  --ease-standard:           cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized:         cubic-bezier(0.2, 0, 0, 1.1);
  --dur-fast:                120ms;
  --dur-med:                 200ms;
  --dur-slow:                360ms;
}

/* ============================================================
   BASE ELEMENT STYLES
   ============================================================ */

html, body {
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--primary-accent);
  color: var(--primary);
}

/* Editorial headlines — Raleway, tight tracking, extreme scale */
h1, .h1, .display-lg {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--display-lg);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--on-surface);
  text-wrap: balance;
  margin: 0;
}
h2, .h2, .display-sm {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--display-sm);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--on-surface);
  text-wrap: balance;
  margin: 0;
}
h3, .h3, .headline-lg {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--headline-lg);
  line-height: var(--leading-snug);
  color: var(--on-surface);
  margin: 0;
}
h4, .h4, .headline-md {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--headline-md);
  line-height: var(--leading-snug);
  color: var(--on-surface);
  margin: 0;
}
h5, .h5, .title-lg {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--title-lg);
  line-height: var(--leading-snug);
  color: var(--on-surface);
  margin: 0;
}

/* Body — Quicksand, warm + human */
p, .body {
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--leading-loose);
  color: var(--on-surface);
  text-wrap: pretty;
  margin: 0 0 1em 0;
}
.body-lg   { font-size: var(--body-lg); line-height: var(--leading-loose); }
.body-sm   { font-size: var(--body-sm); }
.supporting { color: var(--on-surface-variant); }

/* Mono labels — DM Mono, clinical instrument */
.label, code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: var(--label-md);
  letter-spacing: var(--tracking-wide);
  color: var(--on-surface-variant);
}
.label-sm, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--label-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.metric {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  color: var(--on-surface);
}

/* Links — understated, no underline until hover */
a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--primary-container); text-decoration: underline; text-underline-offset: 3px; }

/* Rulers — we avoid hr; but if forced, use extreme space */
hr {
  border: 0;
  height: var(--space-xl);
  margin: 0;
}

/* ---- Utility tonal layers ------------------------------- */
.surface              { background: var(--surface); }
.surface-lowest       { background: var(--surface-container-lowest); }
.surface-low          { background: var(--surface-container-low); }
.surface-container    { background: var(--surface-container); }
.surface-high         { background: var(--surface-container-high); }
.surface-highest      { background: var(--surface-container-highest); }

/* Ghost border — felt, not seen */
.ghost-border {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline-variant) 20%, transparent);
}