/* ============================================================
   Dent.AI — Color & Type Foundations
   ============================================================
   Source of truth for low-level visual tokens. Import this into
   any HTML artifact:
       <link rel="stylesheet" href="colors_and_type.css">

   Palette inferred from thedent.ai marketing site (medical
   blue + clinical neutrals). Update once exact brand HEX
   values are supplied by the client.
   ============================================================ */

/* ---------- 0. Web-fonts (self-hosted) ----------
   woff2 files live in /fonts. Latin subset only.
   Pulled from Google Fonts; substitute for client-confirmed
   typefaces once supplied. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/inter-700.woff2") format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/sora-500.woff2") format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/sora-600.woff2") format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/sora-700.woff2") format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/sora-800.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/jetbrains-mono-400.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/jetbrains-mono-500.woff2") format("woff2")}

/* ---------- 1. Color tokens ---------- */
:root {
  /* Primary — Medical / "implant wireframe" blue */
  --dai-blue-50:  #EAF4FB;
  --dai-blue-100: #C9E2F4;
  --dai-blue-200: #95C6EA;
  --dai-blue-300: #5DA7DC;
  --dai-blue-400: #2D8FCC;   /* primary */
  --dai-blue-500: #1B79B6;   /* primary-pressed */
  --dai-blue-600: #145E91;
  --dai-blue-700: #0F4C76;
  --dai-blue-800: #0B3A5C;
  --dai-blue-900: #07273D;

  /* Deep navy — used for body text, dark surfaces */
  --dai-navy:     #0E2A44;

  /* Cyan accent — used sparingly for highlights, data viz */
  --dai-cyan-400: #45C3D6;
  --dai-cyan-500: #1FA6BB;

  /* Neutrals (clinical, slightly cool) */
  --dai-white:    #FFFFFF;
  --dai-off:      #F7FAFC;
  --dai-gray-50:  #F1F4F7;
  --dai-gray-100: #E3E8EE;
  --dai-gray-200: #CCD5DE;
  --dai-gray-300: #A9B5C2;
  --dai-gray-400: #7C8A99;
  --dai-gray-500: #5A6775;
  --dai-gray-600: #3F4A56;
  --dai-gray-700: #2B333C;
  --dai-gray-800: #1A2027;
  --dai-gray-900: #0E1217;

  /* Semantic */
  --dai-success:  #2BA177;
  --dai-warning:  #E4A93C;
  --dai-danger:   #D14B4B;
  --dai-info:     var(--dai-cyan-500);

  /* Aliases — foreground */
  --fg-1: var(--dai-navy);          /* primary text */
  --fg-2: var(--dai-gray-600);      /* secondary text */
  --fg-3: var(--dai-gray-400);      /* tertiary / hint */
  --fg-inverse: var(--dai-white);
  --fg-link: var(--dai-blue-500);
  --fg-link-hover: var(--dai-blue-600);

  /* Aliases — background */
  --bg-1: var(--dai-white);         /* page */
  --bg-2: var(--dai-off);           /* subtle elevation */
  --bg-3: var(--dai-gray-50);       /* card alt */
  --bg-dark: var(--dai-navy);       /* dark sections */
  --bg-deep: #061827;               /* deepest, near-black blue */

  /* Aliases — borders */
  --border-soft: var(--dai-gray-100);
  --border-default: var(--dai-gray-200);
  --border-strong: var(--dai-gray-300);

  /* Brand surfaces */
  --brand: var(--dai-blue-400);
  --brand-strong: var(--dai-blue-500);
  --brand-soft: var(--dai-blue-50);
  --on-brand: var(--dai-white);

  /* ---------- 2. Spacing scale (4pt) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- 3. Radii ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---------- 4. Elevation ---------- */
  --shadow-1: 0 1px 2px rgba(14, 42, 68, 0.06), 0 1px 1px rgba(14, 42, 68, 0.04);
  --shadow-2: 0 4px 10px rgba(14, 42, 68, 0.08), 0 1px 2px rgba(14, 42, 68, 0.05);
  --shadow-3: 0 12px 30px rgba(14, 42, 68, 0.12), 0 2px 6px rgba(14, 42, 68, 0.06);
  --shadow-glow-blue: 0 10px 40px rgba(45, 143, 204, 0.25);
  --shadow-inner: inset 0 1px 2px rgba(14, 42, 68, 0.05);

  /* ---------- 5. Typography ---------- */
  /* Primary UI sans — geometric, medical/clinical feel.
     Site appears to use Divi defaults (Open Sans / system sans).
     SUBSTITUTED with Inter for a tighter, modern feel — flag for
     client confirmation. */
  --font-sans: "Inter", "Open Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Display — used in hero headlines on website.
     Site headers appear in a clean humanist sans; we use Inter
     tight for display weight. Could be swapped for "Sora" or
     "Manrope" if a more techy display is desired. */
  --font-display: "Sora", "Inter", var(--font-sans);

  /* Monospace — for data, file paths, study references */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  /* Line heights */
  --lh-tight: 1.08;
  --lh-snug: 1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  /* Letter-spacing */
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.16em;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ---------- 6. Motion ---------- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
}

/* ---------- 7. Semantic typography classes ---------- */
.dai-display {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, var(--fs-72));
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.dai-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-48);
  font-weight: var(--weight-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.dai-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  font-weight: var(--weight-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
.dai-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-24);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--fg-1);
}
.dai-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--fg-1);
}
.dai-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
}
.dai-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  font-weight: var(--weight-regular);
  color: var(--fg-2);
}
.dai-p {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.dai-small {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.dai-micro {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-3);
}
.dai-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--fg-1);
}
.dai-quote {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  line-height: 1.35;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  font-style: italic;
}

/* Selection: brand tint */
::selection { background: var(--dai-blue-100); color: var(--fg-1); }