/* =========================================================================
   AI¹ DENTAL — Colors & Type Foundations
   Single source of truth. Import this at the top of any page.
   ========================================================================= */

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

:root {
  /* ---------- COLOR — NEUTRALS (the canvas) ----------------------------- */
  --ivory:        #F4F1EA;    /* default page background */
  --bone:         #E8E3D6;    /* subtle surface / hover on ivory */
  --paper:        #FBFAF5;    /* elevated surface, lighter than ivory */
  --ink:          #0B0D0C;    /* primary foreground / text */
  --graphite-900: #1A1D1C;
  --graphite-700: #3A3E3D;
  --graphite-500: #6B706E;
  --graphite-300: #A8ADAB;
  --graphite-200: #C8CCCB;
  --graphite-100: #E3E5E4;
  --line:         rgba(11, 13, 12, 0.12);   /* default hairline */
  --line-strong:  rgba(11, 13, 12, 0.32);

  /* ---------- COLOR — BRAND (one accent) -------------------------------- */
  --signal:       #1E4D8C;    /* trust-blue — primary accent */
  --signal-dark:  #163A6B;    /* hover / press */
  --signal-soft:  #D9E3F0;    /* tinted background */

  /* ---------- COLOR — SEMANTIC ------------------------------------------ */
  --moss:         #2F6B4E;    /* positive */
  --moss-soft:    #DCE7DF;
  --amber:        #B8833A;    /* warn */
  --amber-soft:   #F0E3C8;
  --rust:         #A43B2A;    /* negative */
  --rust-soft:    #EEDAD4;

  /* ---------- SEMANTIC ALIASES (use these in product code) -------------- */
  --bg:           var(--ivory);
  --bg-elevated:  var(--paper);
  --bg-sunken:    var(--bone);
  --fg-1:         var(--ink);
  --fg-2:         var(--graphite-700);
  --fg-3:         var(--graphite-500);
  --fg-muted:     var(--graphite-300);
  --border:       var(--line);
  --border-bold:  var(--line-strong);
  --accent:       var(--signal);
  --accent-fg:    #FFFFFF;

  /* ---------- TYPE — FAMILIES ------------------------------------------- */
  --font-serif:   'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-system:  ui-sans-serif, system-ui, -apple-system, sans-serif; /* last resort only */

  /* ---------- TYPE — SIZE SCALE (editorial-generous) -------------------- */
  --t-eyebrow:    0.75rem;    /* 12px — eyebrows, tags, mono labels */
  --t-micro:      0.8125rem;  /* 13px — metadata */
  --t-small:      0.9375rem;  /* 15px — captions, UI secondary */
  --t-body:       1.125rem;   /* 18px — body copy default */
  --t-lead:       1.375rem;   /* 22px — intro paragraphs */
  --t-h6:         1.25rem;    /* 20px */
  --t-h5:         1.5rem;     /* 24px */
  --t-h4:         2rem;       /* 32px */
  --t-h3:         2.75rem;    /* 44px */
  --t-h2:         3.75rem;    /* 60px */
  --t-h1:         5.25rem;    /* 84px — hero headline */
  --t-display:    7.5rem;     /* 120px — special occasions */

  /* ---------- TYPE — WEIGHT --------------------------------------------- */
  --w-regular:    400;
  --w-medium:     500;
  --w-semibold:   600;

  /* ---------- TYPE — LINE-HEIGHT ---------------------------------------- */
  --lh-tight:     1.05;
  --lh-headline:  1.15;
  --lh-body:      1.55;
  --lh-loose:     1.7;

  /* ---------- TYPE — TRACKING ------------------------------------------- */
  --track-tight:  -0.02em;
  --track-normal: 0;
  --track-wide:   0.08em;     /* eyebrows & caps labels */

  /* ---------- SPACING — 8px base ---------------------------------------- */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10: 128px;
  --s-11: 192px;
  --s-12: 256px;

  /* ---------- RADII — sharp by default ---------------------------------- */
  --r-0:    0px;
  --r-1:    2px;
  --r-full: 999px;

  /* ---------- BORDERS --------------------------------------------------- */
  --bw-hair:   1px;
  --bw-bold:   2px;

  /* ---------- SHADOW — use SPARINGLY ------------------------------------ */
  --shadow-0: none;
  --shadow-pop: 0 1px 0 0 rgba(11, 13, 12, 0.06),
                0 8px 24px -8px rgba(11, 13, 12, 0.12);

  /* ---------- MOTION ---------------------------------------------------- */
  --ease:       cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast:   150ms;
  --dur-mid:    240ms;
  --dur-slow:   400ms;

  /* ---------- LAYOUT ---------------------------------------------------- */
  --max-w:      1200px;
  --gutter:     48px;
}

/* =========================================================================
   SEMANTIC TYPE ELEMENTS
   Apply by class; base elements get sensible defaults.
   ========================================================================= */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-serif);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  font-weight: var(--w-regular);
  margin: 0 0 var(--s-5);
}

h2, .h2 {
  font-family: var(--font-serif);
  font-size: var(--t-h2);
  line-height: var(--lh-headline);
  letter-spacing: var(--track-tight);
  font-weight: var(--w-regular);
  margin: 0 0 var(--s-5);
}

h3, .h3 {
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  line-height: var(--lh-headline);
  letter-spacing: var(--track-tight);
  font-weight: var(--w-regular);
  margin: 0 0 var(--s-4);
}

h4, .h4 {
  font-family: var(--font-serif);
  font-size: var(--t-h4);
  line-height: var(--lh-headline);
  font-weight: var(--w-regular);
  margin: 0 0 var(--s-4);
}

h5, .h5 {
  font-family: var(--font-serif);
  font-size: var(--t-h5);
  line-height: var(--lh-headline);
  font-weight: var(--w-regular);
  margin: 0 0 var(--s-3);
}

p { margin: 0 0 var(--s-4); max-width: 62ch; }
.lead { font-size: var(--t-lead); line-height: var(--lh-body); color: var(--fg-2); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-3);
  font-weight: var(--w-medium);
}

.mono { font-family: var(--font-mono); }
.small-caps { font-family: var(--font-mono); font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: var(--track-wide); }

code, pre, .code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

a {
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness var(--dur-fast) var(--ease);
}
a:hover { text-decoration-thickness: 2px; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-7) 0;
}

/* The signature ¹ glyph — apply to a <sup> inside a wordmark */
.sup-one {
  font-family: var(--font-mono);
  font-size: 0.55em;
  vertical-align: super;
  line-height: 0;
  font-weight: var(--w-medium);
  letter-spacing: 0;
  margin-left: 0.05em;
}