/* randy-style-guide.css */

:root {
  /* Colors */
  --clr-primary: #1B4E8E;
  --clr-primary-600: #153e72;
  --clr-accent: #F4A261;
  --clr-accent-600: #dd8d4a;
  --clr-bg: #F8F9FA;
  --clr-surface: #ffffff;
  --clr-text: #1a1f2b;
  --clr-muted: #5b6270;
  --clr-border: #e5e7eb;
  --clr-dark: #0B2441;

  /* Typography */
  --ff-heading: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --ff-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";

  /* Type scale */
  --fs-900: clamp(2.5rem, 6vw, 3.5rem);
  --fs-800: clamp(2rem, 4.5vw, 2.75rem);
  --fs-700: clamp(1.5rem, 3.5vw, 2rem);
  --fs-600: clamp(1.25rem, 2vw, 1.5rem);
  --fs-500: 1.125rem;
  --fs-400: 1rem;
  --fs-300: 0.9375rem;
  --fs-200: 0.875rem;

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 14px 30px rgba(0,0,0,0.12);

  /* Layout */
  --container-max: 1120px;
  --container-pad: clamp(1rem, 4vw, 2rem);

  /* Z-index */
  --z-nav: 50;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-400);
  line-height: 1.6;
  color: var(--clr-text);
  background: var(--clr-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
a { color: var(--clr-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  width: 100%;
  max-width: var(--container-max);
  padding-inline: var(--container-pad);
  margin-inline: auto;
}

.section { padding-block: var(--sp-16); }
.section--tight { padding-block: var(--sp-10); }

/* Headings */
h1, .h1 { font-family: var(--ff-heading); font-size: var(--fs-900); line-height: 1.15; margin: 0 0 var(--sp-6); letter-spacing: -0.01em; }
h2, .h2 { font-family: var(--ff-heading); font-size: var(--fs-800); line-height: 1.2; margin: 0 0 var(--sp-5); letter-spacing: -0.01em; }
h3, .h3 { font-family: var(--ff-heading); font-size: var(--fs-700); line-height: 1.25; margin: 0 0 var(--sp-4); }
.lead { font-size: var(--fs-500); color: var(--clr-muted); max-width: 60ch; }

/* Utilities */
.text-center { text-align: center; }
.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}