/* ============================================================
   Kaiden Kissack — Design System
   Colors & Type foundations
   Source of truth: brand spec (overrides codebase placeholder
   blue #2563eb with the brand deep blue #004aad).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Brand palette ---- */
  --brand-blue:        #004aad;   /* primary — deep blue */
  --brand-blue-hover:  #003a8c;   /* primary pressed/hover (darker) */
  --brand-blue-tint:   #e8f0fc;   /* accent light — washes, chips, icon wells */

  --bg:                #fff8ed;   /* warm off-white — default page background */
  --surface:           #ffffff;   /* white — cards, lifted panels, alt sections */
  --ink:               #111111;   /* dark section background & primary text */
  --ink-deep:          #0a0a0a;   /* footer / deepest surface */

  /* ---- Text scale ---- */
  --fg1:               #111111;   /* headings, primary text */
  --fg2:               #444444;   /* body, secondary text */
  --fg3:               #888888;   /* muted, captions, eyebrows-on-light */

  /* ---- Text on dark ---- */
  --fg-on-dark-1:      #ffffff;
  --fg-on-dark-2:      rgba(255,255,255,0.70);
  --fg-on-dark-3:      rgba(255,255,255,0.55);

  /* ---- Lines & strokes ---- */
  --border:            rgba(0,0,0,0.08);   /* hairline on light */
  --border-strong:     rgba(0,0,0,0.20);   /* outline buttons, dividers */
  --border-on-dark:    rgba(255,255,255,0.10);

  /* ---- Semantic ---- */
  --primary:           var(--brand-blue);
  --primary-fg:        #ffffff;
  --ring:              var(--brand-blue);
  --destructive:       #dc2626;

  /* ---- Type families ---- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Type weights ---- */
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-black: 900;

  /* ---- Type scale (display = Playfair, ui = Inter) ---- */
  --t-display-xl: 5.5rem;   /* 88px — hero name */
  --t-display-lg: 3.75rem;  /* 60px — section titles */
  --t-display-md: 3rem;     /* 48px */
  --t-h3:         1.5rem;    /* 24px — card titles (serif) */
  --t-body-lg:    1.25rem;   /* 20px — lead paragraphs */
  --t-body:       1.0625rem; /* 17px — body */
  --t-small:      0.875rem;  /* 14px — meta */
  --t-eyebrow:    0.75rem;   /* 12px — uppercase tracked label */

  /* ---- Radii ---- */
  --r-sm: 0.5rem;    /* 8px  — inputs */
  --r-md: 0.75rem;   /* 12px — icon wells, small cards */
  --r-lg: 1rem;      /* 16px — cards */
  --r-xl: 1.5rem;    /* 24px — feature cards */
  --r-2xl: 2rem;     /* 32px — hero portrait frame */
  --r-pill: 9999px;  /* pills — all buttons, badges, chips */

  /* ---- Spacing rhythm (8pt base) ---- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-6: 1.5rem;  --space-8: 2rem;
  --space-12: 3rem;    --space-16: 4rem;   --space-24: 6rem;
  --section-y: 6rem;   /* vertical padding of a page section */
  --max-w: 80rem;      /* 1280px content max width */

  /* ---- Elevation ---- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.05);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.05);
  --shadow-lift: 0 12px 40px rgba(0,0,0,0.12);          /* card hover */
  --shadow-cta:  0 10px 24px rgba(0,74,173,0.22);       /* primary button glow */
  --shadow-portrait: 0 30px 60px rgba(0,74,173,0.12);   /* hero photo */

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 200ms;
  --dur: 300ms;
  --dur-slow: 500ms;
}

/* ============================================================
   Semantic element styles — apply on top of the tokens.
   Use these class names in HTML artifacts.
   ============================================================ */

.ds-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
}

.ds-h1 {
  font-family: var(--font-display);
  font-size: var(--t-display-xl);
  font-weight: var(--w-bold);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--fg1);
}

.ds-h2 {
  font-family: var(--font-display);
  font-size: var(--t-display-lg);
  font-weight: var(--w-bold);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--fg1);
}

.ds-h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  line-height: 1.2;
  color: var(--fg1);
}

.ds-lead {
  font-family: var(--font-ui);
  font-size: var(--t-body-lg);
  font-weight: var(--w-regular);
  line-height: 1.6;
  color: var(--fg2);
}

.ds-body {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: 1.65;
  color: var(--fg2);
}

.ds-small {
  font-family: var(--font-ui);
  font-size: var(--t-small);
  color: var(--fg3);
}

/* The signature wordmark dot: K.Kissack with a blue period */
.ds-dot { color: var(--primary); }