/* ============================================================
   Dennis Gubsky — Design Tokens
   Colors, type, spacing, radii, shadows, motion.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Roboto+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color: surfaces ---------- */
  --surface-0: #ffffff;
  --surface-1: #f7f8fa;     /* paper white */
  --surface-2: #f2f4f7;     /* hairline-adjacent */
  --surface-inverse: #0b1220;

  /* ---------- Color: ink ---------- */
  --ink-1: #0b1220;         /* primary text */
  --ink-2: #344054;         /* secondary text */
  --ink-3: #475467;         /* tertiary / metadata */
  --ink-4: #98a2b3;         /* placeholder, disabled */
  --ink-on-dark: #ffffff;
  --ink-on-dark-2: #cdd5e0;

  /* ---------- Color: brand blue ---------- */
  --blue-50:  #eef3ff;
  --blue-100: #d6e2ff;
  --blue-300: #7faaff;
  --blue-500: #1e5bd6;      /* PRIMARY — brand blue */
  --blue-700: #0e2a6b;      /* deep navy */
  --blue-900: #061635;

  /* ---------- Color: warm sunset accent ---------- */
  --warm-amber:    #f5a524;
  --warm-coral:    #f25c54;
  --warm-magenta:  #c7367e;
  --warm-500:      #f5a524; /* alias used by avatar offset block */
  --warm-gradient: linear-gradient(110deg, #f5a524 0%, #f25c54 50%, #c7367e 100%);
  --warm-gradient-soft: linear-gradient(110deg, rgba(245,165,36,0.15) 0%, rgba(242,92,84,0.15) 50%, rgba(199,54,126,0.15) 100%);

  /* ---------- Color: neutrals ---------- */
  --gray-50:  #f9fafb;
  --gray-100: #f2f4f7;
  --gray-200: #e4e7ec;
  --gray-300: #d0d5dd;
  --gray-400: #98a2b3;
  --gray-500: #667085;
  --gray-700: #344054;

  /* ---------- Color: semantic ---------- */
  --success: #16a34a;
  --warning: #f5a524;
  --danger:  #dc2626;
  --info:    var(--blue-500);

  /* ---------- Border ---------- */
  --border-default: var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-focus:   rgba(30, 91, 214, 0.4);

  /* ---------- Type: families ---------- */
  --font-display: 'Roboto', system-ui, -apple-system, sans-serif;
  --font-body:    'Roboto', system-ui, -apple-system, sans-serif;
  --font-mono:    'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type: scale (1.25 — minor third) ---------- */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-38: 38px;
  --fs-48: 48px;
  --fs-60: 60px;
  --fs-76: 76px;

  /* ---------- Type: weights ---------- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ---------- Type: leading ---------- */
  --lh-display: 1.05;
  --lh-heading: 1.2;
  --lh-body:    1.55;
  --lh-mono:    1.5;

  /* ---------- Type: tracking ---------- */
  --tr-display: -0.02em;
  --tr-tight:   -0.01em;
  --tr-eyebrow:  0.08em;

  /* ---------- Spacing (4px grid) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- Radii ---------- */
  --radius-chip:   4px;
  --radius-button: 8px;
  --radius-card:   12px;
  --radius-hero:   16px;
  --radius-pill:   999px;

  /* ---------- Shadows ---------- */
  --shadow-sm:   0 1px 2px rgba(11, 18, 32, 0.06);
  --shadow-md:   0 4px 12px rgba(11, 18, 32, 0.08);
  --shadow-lg:   0 16px 40px rgba(11, 18, 32, 0.10);
  --shadow-glow: 0 0 0 4px rgba(30, 91, 214, 0.15);
  --shadow-warm: 0 12px 40px rgba(242, 92, 84, 0.18);

  /* ---------- Motion ---------- */
  --ease-entry: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-state: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-hover: 150ms;
  --dur-state: 280ms;
  --dur-entry: 600ms;

  /* ---------- Layout ---------- */
  --container-max: 1120px;
  --gutter-mobile: 24px;
  --gutter-desktop: 48px;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--ink-1);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-display);
  color: var(--ink-1);
  margin: 0;
}

h1, .h1 {
  font-size: clamp(var(--fs-48), 6vw, var(--fs-76));
  line-height: var(--lh-display);
  font-weight: var(--fw-bold);
}
h2, .h2 { font-size: var(--fs-48); }
h3, .h3 { font-size: var(--fs-30); }
h4, .h4 { font-size: var(--fs-24); }
h5, .h5 { font-size: var(--fs-20); font-weight: var(--fw-medium); }
h6, .h6 { font-size: var(--fs-16); font-weight: var(--fw-semi); }

p, .p {
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-20);
  line-height: 1.5;
  color: var(--ink-2);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
}

code, .code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-1);
  padding: 2px 6px;
  border-radius: var(--radius-chip);
  border: 1px solid var(--border-default);
  color: var(--ink-1);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  line-height: var(--lh-mono);
  background: var(--surface-inverse);
  color: var(--ink-on-dark);
  padding: var(--space-6);
  border-radius: var(--radius-card);
  overflow-x: auto;
}

a {
  color: var(--blue-500);
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease-state);
}
a:hover { color: var(--blue-700); }
a:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--blue-100); color: var(--blue-700); }