/* ──────────────────────────────────────────────────────────
   Cashmere Design System — colors_and_type.css
   The intelligence layer for financial services.
   ────────────────────────────────────────────────────────── */

/* ─── Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&display=swap');

/* Tiempos Headline — licensed Klim Type Foundry files served locally. */
@font-face {
  font-family: "Tiempos Headline";
  src: url("fonts/TestTiemposHeadline-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tiempos Headline";
  src: url("fonts/TestTiemposHeadline-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tiempos Headline";
  src: url("fonts/TestTiemposHeadline-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tiempos Headline";
  src: url("fonts/TestTiemposHeadline-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── Foundation Colors ──────────────────────────────── */
  --cm-bg-primary:    #FFFFFE;  /* Warm Off White        */
  --cm-bg-secondary:  #FAF9F9;  /* Off White 2 — surfaces */
  --cm-bg-tertiary:   #F8F5F4;  /* Soft warm wash         */
  --cm-border:        #F0EFEE;  /* Stone Veil — hairlines */
  --cm-border-strong: #DCDADA;  /* For deeper structure   */

  /* ─── Ink (Foreground) ───────────────────────────────── */
  --cm-ink-primary:   #252322;  /* Charcoal Ink           */
  --cm-ink-secondary: #81807E;  /* Graphite Ink           */
  --cm-ink-tertiary:  #C3C1C1;  /* Mist                   */
  --cm-ink-quiet:     #DCDADA;  /* Whisper / metadata     */
  --cm-ink-inverse:   #FFFFFE;

  /* ─── Accent Colors ──────────────────────────────────── */
  --cm-accent:        #D4915B;  /* Signal Copper          */
  --cm-accent-warm:   #C68D60;  /* Cashmere Tan           */
  --cm-accent-soft:   #E8B083;  /* Sunset Wool            */
  --cm-accent-pale:   #E7D8C5;  /* Carded Fiber           */
  --cm-blue:          #7593A4;  /* Intelligence Blue      */
  --cm-blue-soft:     #A2B9C7;  /* Glacier                */

  /* ─── Semantic ───────────────────────────────────────── */
  --cm-fg-1: var(--cm-ink-primary);
  --cm-fg-2: var(--cm-ink-secondary);
  --cm-fg-3: var(--cm-ink-tertiary);
  --cm-fg-link: var(--cm-accent);

  /* ─── Shadows / Elevation ────────────────────────────── */
  --cm-shadow-soft: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --cm-shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 0 0 1px var(--cm-border);
  --cm-shadow-pop:  0 8px 24px -8px rgba(37, 35, 34, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04);

  /* ─── Spacing (8-pt) ─────────────────────────────────── */
  --cm-space-1: 4px;
  --cm-space-2: 8px;
  --cm-space-3: 16px;
  --cm-space-4: 24px;
  --cm-space-5: 32px;
  --cm-space-6: 40px;
  --cm-space-7: 48px;
  --cm-space-8: 56px;
  --cm-space-9: 64px;

  /* ─── Radii ─────────────────────────────────────────── */
  --cm-radius-sm: 2px;
  --cm-radius:    4px;
  --cm-radius-md: 6px;
  --cm-radius-lg: 8px;
  --cm-radius-pill: 999px;

  /* ─── Type Families ──────────────────────────────────── */
  --cm-font-sans:   "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cm-font-serif:  "Tiempos Headline", "Iowan Old Style", "Times New Roman", serif;
  --cm-font-mono:   "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ─── Type Scale (semantic) ──────────────────────────── */
  --cm-display:    300 48px/1.05 var(--cm-font-serif);   /* Editorial display */
  --cm-h1:         300 40px/1.1  var(--cm-font-sans);    /* Primary header   */
  --cm-h2:         300 32px/1.15 var(--cm-font-sans);    /* Section          */
  --cm-h3:         300 24px/1.25 var(--cm-font-sans);    /* Subsection       */
  --cm-body-lg:    300 18px/1.5  var(--cm-font-sans);    /* Body primary     */
  --cm-body:       300 16px/1.55 var(--cm-font-sans);    /* Body small       */
  --cm-meta:       300 14px/1.45 var(--cm-font-sans);    /* Meta / labels    */
  --cm-cta:        400 18px/1    var(--cm-font-sans);    /* Buttons / CTA    */

  --cm-tracking-tight: -0.020em;
  --cm-tracking-snug:  -0.010em;
}

/* ─── Element defaults ─────────────────────────────────── */
html, body {
  background: var(--cm-bg-primary);
  color: var(--cm-fg-1);
  font: var(--cm-body-lg);
  -webkit-font-smoothing: antialiased;
  letter-spacing: var(--cm-tracking-snug);
}

h1 { font: var(--cm-h1); letter-spacing: var(--cm-tracking-snug); margin: 0; }
h2 { font: var(--cm-h2); letter-spacing: var(--cm-tracking-snug); margin: 0; }
h3 { font: var(--cm-h3); letter-spacing: var(--cm-tracking-snug); margin: 0; }
p  { font: var(--cm-body-lg); margin: 0; color: var(--cm-fg-1); }

.cm-display    { font: var(--cm-display); letter-spacing: var(--cm-tracking-tight); }
.cm-eyebrow    { font: var(--cm-body-lg); color: var(--cm-fg-2); }
.cm-section    { font: var(--cm-body-lg); color: var(--cm-accent); }
.cm-meta       { font: var(--cm-meta); color: var(--cm-fg-2); }
.cm-quiet      { color: var(--cm-fg-2); }
.cm-faint      { color: var(--cm-ink-quiet); }

.cm-card {
  background: var(--cm-bg-secondary);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius);
  box-shadow: var(--cm-shadow-soft);
}

.cm-button {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 16px;
  background: var(--cm-ink-primary);
  color: var(--cm-ink-inverse);
  font: var(--cm-cta);
  border: 0; border-radius: var(--cm-radius);
  cursor: pointer;
  transition: background 120ms ease;
}
.cm-button:hover { background: #3a3635; }
.cm-button.secondary {
  background: transparent; color: var(--cm-fg-1);
  border: 1px solid var(--cm-border-strong);
}
.cm-button.secondary:hover { background: var(--cm-bg-secondary); }