/* ============================================================
   DIAMOND LABORATORIES, INC. — Design Tokens
   colors_and_type.css
   Brand: clinical • heritage • precise • premium
   ============================================================ */

/* ---- Webfonts -------------------------------------------------
   Display: TRAJAN BOLD — official brand face, self-hosted from
            fonts/Trajan_Bold.ttf (only the Bold weight supplied;
            it covers every display weight in this system).
   Text:    Hanken Grotesk — clean humanist sans for body/UI
            (proposed; brand sheet specifies display face only),
            loaded via Google Fonts CDN.
---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

@font-face {
  font-family: 'Trajan Pro';
  src: url('fonts/Trajan_Bold.ttf') format('truetype');
  font-weight: 400 700;   /* single supplied weight serves all */
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== BRAND PALETTE (exact, from brand sheet) ===== */
  --dli-paper:   #fbfbf9; /* off-white ground          */
  --dli-mist:    #d9dfdf; /* light grey / hairlines     */
  --dli-silver:  #acbcc9; /* light blue-grey            */
  --dli-steel:   #8393a3; /* medium slate               */
  --dli-ink:     #000434; /* deep diamond navy          */

  /* ===== EXTENDED NEUTRALS (derived, oklch-harmonized) ===== */
  --dli-white:   #ffffff;
  --dli-mist-2:  #eef1f1; /* between paper & mist        */
  --dli-silver-2:#c7d2db; /* between mist & silver       */
  --dli-steel-2: #5e6e7e; /* darker steel, for body text */
  --dli-ink-2:   #1a1f48; /* navy raised one step        */

  /* ===== SEMANTIC — SURFACES ===== */
  --bg-base:      var(--dli-paper);
  --bg-raised:    var(--dli-white);
  --bg-sunken:    var(--dli-mist-2);
  --bg-inverse:   var(--dli-ink);
  --bg-inverse-2: var(--dli-ink-2);
  --bg-accent:    var(--dli-silver);

  /* ===== SEMANTIC — TEXT ===== */
  --fg1: var(--dli-ink);      /* primary text / headings        */
  --fg2: var(--dli-steel-2);  /* body text                       */
  --fg3: var(--dli-steel);    /* secondary / captions            */
  --fg4: var(--dli-silver);   /* disabled / faint                */
  --fg-on-dark:   #eaf0f5;    /* text on navy                    */
  --fg-on-dark-2: var(--dli-silver); /* secondary text on navy   */

  /* ===== SEMANTIC — LINES & STROKES ===== */
  --border:        var(--dli-mist);
  --border-strong: var(--dli-silver);
  --border-on-dark: rgba(172,188,201,0.28);
  --rule-accent:   var(--dli-steel); /* engraved hairline rules  */

  /* ===== ACCENT / INTERACTIVE ===== */
  --accent:        var(--dli-ink);
  --accent-hover:  var(--dli-ink-2);
  --accent-soft:   var(--dli-silver);
  --link:          var(--dli-steel-2);
  --link-hover:    var(--dli-ink);
  --focus-ring:    var(--dli-steel);

  /* ===== STATUS (clinical, desaturated to fit palette) ===== */
  --ok:    #4b7a6b;
  --warn:  #b08442;
  --error: #9b4a4a;
  --info:  var(--dli-steel);

  /* ===== TYPE FAMILIES ===== */
  --font-display: 'Trajan Pro', 'Cinzel', 'Times New Roman', serif;
  --font-text:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* ===== TYPE SCALE (1.250 — major third) ===== */
  --size-display: 64px;
  --size-h1:      48px;
  --size-h2:      36px;
  --size-h3:      26px;
  --size-h4:      20px;
  --size-body-lg: 18px;
  --size-body:    16px;
  --size-small:   14px;
  --size-caption: 12px;
  --size-eyebrow: 12px;

  /* ===== TYPE — WEIGHTS / SPACING / LEADING ===== */
  --tracking-display: 0.06em;  /* Trajan caps want air         */
  --tracking-eyebrow: 0.22em;
  --tracking-body:    0;
  --leading-tight:    1.12;
  --leading-snug:     1.3;
  --leading-normal:   1.6;

  /* ===== SPACING (8pt base, 4pt half-steps) ===== */
  --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;

  /* ===== RADII (restrained — precision instruments, not toys) ===== */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ===== SHADOWS (soft, cool-tinted, low elevation) ===== */
  --shadow-xs: 0 1px 2px rgba(0,4,52,0.05);
  --shadow-sm: 0 2px 6px rgba(0,4,52,0.06), 0 1px 2px rgba(0,4,52,0.04);
  --shadow-md: 0 8px 24px rgba(0,4,52,0.08), 0 2px 6px rgba(0,4,52,0.05);
  --shadow-lg: 0 18px 48px rgba(0,4,52,0.12), 0 4px 12px rgba(0,4,52,0.06);
  --shadow-inset: inset 0 0 0 1px rgba(0,4,52,0.04);

  /* ===== MOTION ===== */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES (use as a class layer or reference)
   ============================================================ */

.dli-eyebrow {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--size-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg3);
}

.dli-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg1);
}

.dli-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--size-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg1);
}

.dli-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--size-h2);
  line-height: var(--leading-snug);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg1);
}

.dli-h3 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--size-h3);
  line-height: var(--leading-snug);
  color: var(--fg1);
}

.dli-h4 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--size-h4);
  line-height: var(--leading-snug);
  color: var(--fg1);
}

.dli-lead {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--size-body-lg);
  line-height: var(--leading-normal);
  color: var(--fg2);
}

.dli-body {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--size-body);
  line-height: var(--leading-normal);
  color: var(--fg2);
}

.dli-small {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--size-small);
  line-height: var(--leading-normal);
  color: var(--fg3);
}

.dli-caption {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--size-caption);
  line-height: var(--leading-snug);
  color: var(--fg3);
}