/* ============================================================
   DESIGN SYSTEM — Cream / Black / Orange
   ============================================================
   Import this file into every page/component in your project.
   Usage:  <link rel="stylesheet" href="design-system.css">
   Or in JS: import './design-system.css';
   ============================================================ */

/* ── Google Fonts ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');


/* ══════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — CSS Custom Properties
   ══════════════════════════════════════════════════════════════ */
:root {

  /* — Palette ——————————————————————————————————————————————— */
  --color-cream-50:   #FFFDF7;   /* page background */
  --color-cream-100:  #FFF8EC;   /* softer surface */
  --color-cream-200:  #F5EDD8;   /* cards, panels */
  --color-cream-300:  #EAD9BC;   /* borders, dividers */
  --color-cream-400:  #D4BC96;   /* muted borders */

  --color-black:      #0D0D0D;   /* primary text */
  --color-black-80:   #2A2A2A;   /* secondary text */
  --color-black-60:   #4A4A4A;   /* tertiary text / icons */
  --color-black-20:   rgba(13,13,13,.12); /* subtle shadows */

  --color-orange:     #E85D04;   /* primary accent */
  --color-orange-light: #FF7A25; /* hover / highlights */
  --color-orange-dark:  #C44D00; /* pressed state */
  --color-orange-pale:  #FFF0E6; /* tinted background fills */
  --color-orange-glow:  rgba(232,93,4,.18); /* shadow / glow */

  --color-white:      #FFFFFF;

  /* — Semantic Aliases ————————————————————————————————————— */
  --bg-page:          var(--color-cream-50);
  --bg-surface:       var(--color-cream-200);
  --bg-elevated:      var(--color-white);
  --bg-accent-tint:   var(--color-orange-pale);

  --text-primary:     var(--color-black);
  --text-secondary:   var(--color-black-80);
  --text-muted:       var(--color-black-60);
  --text-inverse:     var(--color-cream-50);
  --text-accent:      var(--color-orange);
  --text-on-accent:   var(--color-white);

  --border-light:     var(--color-cream-300);
  --border-medium:    var(--color-cream-400);
  --border-accent:    var(--color-orange);
  --border-dark:      var(--color-black);

  /* — Typography ——————————————————————————————————————————— */
  --font-display:     'Playfair Display', Georgia, serif;
  --font-body:        'DM Sans', system-ui, sans-serif;
  --font-mono:        'DM Mono', 'Courier New', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.875rem;   /* 30px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  3.75rem;    /* 60px */
  --text-6xl:  4.5rem;     /* 72px */

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-tight: -0.03em;
  --tracking-normal: 0em;
  --tracking-wide:  0.06em;
  --tracking-widest: 0.14em;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* — Spacing (8-pt grid) —————————————————————————————————— */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* — Border Radius ———————————————————————————————————————— */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 9999px;
  --radius-none: 0px;

  /* — Shadows —————————————————————————————————————————————— */
  --shadow-xs:  0 1px 2px var(--color-black-20);
  --shadow-sm:  0 2px 6px var(--color-black-20);
  --shadow-md:  0 4px 16px var(--color-black-20);
  --shadow-lg:  0 8px 32px rgba(13,13,13,.14);
  --shadow-xl:  0 16px 48px rgba(13,13,13,.16);
  --shadow-accent: 0 6px 24px var(--color-orange-glow);

  /* — Transitions —————————————————————————————————————————— */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* — Layout ——————————————————————————————————————————————— */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;

  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:100;
  --z-modal:   200;
  --z-toast:   300;
  --z-max:     9999;
}


/* ══════════════════════════════════════════════════════════════
   2. RESET & BASE
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}
ul, ol { list-style: none; }
hr {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: var(--space-8) 0;
}


/* ══════════════════════════════════════════════════════════════
   3. TYPOGRAPHY
   ══════════════════════════════════════════════════════════════ */

/* Display / Headings — Playfair Display */
h1, h2, h3, h4, h5, h6,
.display, .heading {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

h1, .h1 { font-size: var(--text-5xl); }
h2, .h2 { font-size: var(--text-4xl); }
h3, .h3 { font-size: var(--text-3xl); }
h4, .h4 { font-size: var(--text-2xl); }
h5, .h5 { font-size: var(--text-xl);  }
h6, .h6 { font-size: var(--text-lg);  }

/* Body copy */
p { max-width: 68ch; }
.text-sm    { font-size: var(--text-sm); }
.text-md    { font-size: var(--text-md); }
.text-lg    { font-size: var(--text-lg); }
.text-muted { color: var(--text-muted); }
.text-accent{ color: var(--text-accent); }

/* Labels / Overlines */
.label, .overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* Code */
code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
}
code { padding: 0.1em 0.4em; }
pre  { padding: var(--space-4); overflow-x: auto; }

/* Links */
a.link, .prose a {
  color: var(--text-accent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}
a.link:hover, .prose a:hover {
  border-bottom-color: var(--color-orange);
}

/* Accent text highlight */
.highlight {
  position: relative;
  display: inline;
  color: var(--color-orange);
}
.highlight::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0.05em;
  width: 100%; height: 0.08em;
  background: var(--color-orange);
  opacity: 0.4;
  border-radius: 2px;
}


/* ══════════════════════════════════════════════════════════════
   4. LAYOUT UTILITIES
   ══════════════════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.container--sm  { max-width: var(--container-sm);  }
.container--md  { max-width: var(--container-md);  }
.container--lg  { max-width: var(--container-lg);  }
.container--2xl { max-width: var(--container-2xl); }

.section { padding-block: var(--space-24); }
.section--sm { padding-block: var(--space-12); }
.section--lg { padding-block: var(--space-32); }

/* Flex helpers */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center{ align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.gap-2  { gap: var(--space-2); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

/* Grid helpers */
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}


/* ══════════════════════════════════════════════════════════════
   5. COMPONENTS
   ══════════════════════════════════════════════════════════════ */

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-spring);
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primary — solid orange */
.btn-primary {
  background: var(--color-orange);
  color: var(--color-white);
  border-color: var(--color-orange);
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover {
  background: var(--color-orange-light);
  border-color: var(--color-orange-light);
  box-shadow: 0 8px 28px var(--color-orange-glow);
}
.btn-primary:active {
  background: var(--color-orange-dark);
  border-color: var(--color-orange-dark);
}

/* Secondary — black fill */
.btn-secondary {
  background: var(--color-black);
  color: var(--color-cream-50);
  border-color: var(--color-black);
}
.btn-secondary:hover {
  background: var(--color-black-80);
  border-color: var(--color-black-80);
  box-shadow: var(--shadow-md);
}

/* Outline — orange border, transparent fill */
.btn-outline {
  background: transparent;
  color: var(--color-orange);
  border-color: var(--color-orange);
}
.btn-outline:hover {
  background: var(--color-orange-pale);
  box-shadow: var(--shadow-accent);
}

/* Ghost — minimal */
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-light);
}
.btn-ghost:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

/* Sizes */
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn-lg { padding: var(--space-4) var(--space-10); font-size: var(--text-md); border-radius: var(--radius-lg); }
.btn-xl { padding: var(--space-5) var(--space-12); font-size: var(--text-lg); border-radius: var(--radius-xl); }
.btn-pill{ border-radius: var(--radius-pill); }


/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

/* Accent card — left orange border */
.card-accent {
  border-left: 4px solid var(--color-orange);
}

/* Dark card */
.card-dark {
  background: var(--color-black);
  color: var(--text-inverse);
  border-color: var(--color-black-80);
}
.card-dark .text-muted { color: var(--color-cream-300); }

/* Tinted card */
.card-tinted {
  background: var(--bg-accent-tint);
  border-color: rgba(232,93,4,.25);
}

/* Card sub-elements */
.card-header {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--space-6);
}
.card-footer {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
  margin-top: var(--space-6);
}


/* ── Badges / Tags ────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.badge-orange { background: var(--color-orange-pale); color: var(--color-orange-dark); border: 1px solid rgba(232,93,4,.3); }
.badge-black  { background: var(--color-black); color: var(--color-cream-50); }
.badge-cream  { background: var(--color-cream-200); color: var(--color-black-80); border: 1px solid var(--border-medium); }
.badge-outline{ background: transparent; border: 1px solid var(--color-orange); color: var(--color-orange); }


/* ── Form Inputs ──────────────────────────────────────────── */
.input, .textarea, .select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px var(--color-orange-glow);
}
.textarea { resize: vertical; min-height: 120px; }

.label-text {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field-hint { font-size: var(--text-xs); color: var(--text-muted); }
.field-error { font-size: var(--text-xs); color: var(--color-orange-dark); }
.input.error { border-color: var(--color-orange-dark); }


/* ── Navigation ───────────────────────────────────────────── */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-8);
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  z-index: var(--z-dropdown);
  backdrop-filter: blur(8px);
  background: rgba(255,253,247,.92);
}
.nav-logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}
.nav-logo span { color: var(--color-orange); }
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.nav-link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  transition: color var(--transition-fast);
  letter-spacing: var(--tracking-wide);
}
.nav-link:hover, .nav-link.active { color: var(--color-orange); }
.nav-link.active {
  position: relative;
}
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 100%; height: 2px;
  background: var(--color-orange);
  border-radius: 2px;
}


/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  padding-block: var(--space-32);
  text-align: center;
}
.hero-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: var(--space-4);
}
.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--weight-black);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-6);
}
.hero-title em {
  font-style: italic;
  color: var(--color-orange);
}
.hero-subtitle {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  line-height: var(--leading-loose);
}
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}


/* ── Dividers & Accents ───────────────────────────────────── */
.divider-accent {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block: var(--space-8);
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}
.divider-accent::before,
.divider-accent::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-light);
}
.accent-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--color-orange);
  border-radius: var(--radius-pill);
}
.accent-line {
  display: block;
  width: 48px; height: 3px;
  background: var(--color-orange);
  border-radius: 2px;
}

/* Section heading helper */
.section-heading {
  margin-bottom: var(--space-12);
}
.section-heading .accent-line { margin-bottom: var(--space-4); }
.section-heading h2 { margin-bottom: var(--space-4); }
.section-heading p  { color: var(--text-muted); font-size: var(--text-lg); }


/* ── Alert / Banner ───────────────────────────────────────── */
.alert {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid;
  font-size: var(--text-sm);
}
.alert-info    { background: var(--color-cream-200); border-color: var(--border-medium); color: var(--text-secondary); }
.alert-accent  { background: var(--color-orange-pale); border-color: rgba(232,93,4,.3); color: var(--color-orange-dark); }
.alert-success { background: #EFF8F0; border-color: #B7DDB9; color: #2D6E34; }
.alert-error   { background: #FEF0EC; border-color: rgba(200,50,0,.25); color: var(--color-orange-dark); }


/* ── Tooltip ──────────────────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-black);
  color: var(--color-cream-50);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: var(--z-tooltip, 50);
}
[data-tooltip]:hover::after { opacity: 1; }


/* ── Table ────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
thead th {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-orange);
}
tbody tr { border-bottom: 1px solid var(--border-light); }
tbody tr:hover { background: var(--color-cream-100); }
tbody td { padding: var(--space-4); color: var(--text-secondary); }


/* ── Progress / Loading ───────────────────────────────────── */
.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--border-light);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-orange), var(--color-orange-light));
  border-radius: var(--radius-pill);
  transition: width var(--transition-slow);
}

.spinner {
  width: 24px; height: 24px;
  border: 2.5px solid var(--border-light);
  border-top-color: var(--color-orange);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ══════════════════════════════════════════════════════════════
   6. SURFACE PATTERNS & TEXTURE
   ══════════════════════════════════════════════════════════════ */

/* Subtle dot-grid overlay for sections */
.bg-grid {
  background-image: radial-gradient(var(--border-light) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
}

/* Orange gradient band */
.bg-orange-band {
  background: linear-gradient(135deg, var(--color-orange-dark) 0%, var(--color-orange) 50%, var(--color-orange-light) 100%);
  color: var(--color-white);
}

/* Dark section */
.bg-dark {
  background: var(--color-black);
  color: var(--text-inverse);
}
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4,.bg-dark h5,.bg-dark h6 {
  color: var(--color-cream-50);
}
.bg-dark p, .bg-dark .text-muted { color: var(--color-cream-300); }

/* Cream tinted */
.bg-tinted  { background: var(--color-cream-200); }
.bg-surface { background: var(--bg-surface); }


/* ══════════════════════════════════════════════════════════════
   7. ANIMATIONS
   ══════════════════════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse-orange {
  0%, 100% { box-shadow: 0 0 0 0 var(--color-orange-glow); }
  50%       { box-shadow: 0 0 0 10px transparent; }
}

.animate-fade-up   { animation: fadeUp 0.6s var(--transition-slow) both; }
.animate-fade-in   { animation: fadeIn 0.5s ease both; }
.animate-slide-in  { animation: slideInLeft 0.5s ease both; }
.animate-scale-in  { animation: scaleIn 0.4s ease both; }
.animate-pulse-accent { animation: pulse-orange 2s ease infinite; }

/* Stagger helpers */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }


/* ══════════════════════════════════════════════════════════════
   8. UTILITY CLASSES
   ══════════════════════════════════════════════════════════════ */

/* Text alignment */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

/* Display */
.block   { display: block; }
.hidden  { display: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* Spacing */
.mt-auto { margin-top: auto; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }

/* Borders */
.border-top    { border-top: 1px solid var(--border-light); }
.border-bottom { border-bottom: 1px solid var(--border-light); }
.border-accent { border: 2px solid var(--color-orange); }

/* Overflow */
.overflow-hidden { overflow: hidden; }

/* Width */
.w-full  { width: 100%; }
.max-w-prose { max-width: 68ch; }

/* Rounded */
.rounded-sm  { border-radius: var(--radius-sm); }
.rounded     { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-xl  { border-radius: var(--radius-xl); }
.rounded-pill{ border-radius: var(--radius-pill); }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-accent { box-shadow: var(--shadow-accent); }


/* ══════════════════════════════════════════════════════════════
   9. RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root {
    --text-5xl: 3rem;
    --text-6xl: 3.5rem;
  }
  .nav-links { gap: var(--space-6); }
}

@media (max-width: 768px) {
  :root {
    --text-4xl: 2.25rem;
    --text-5xl: 2.5rem;
    --text-6xl: 2.75rem;
  }
  .container { padding-inline: var(--space-4); }
  .section { padding-block: var(--space-16); }
  .hero { padding-block: var(--space-20); }
  .hero-title { font-size: var(--text-4xl); }
  .nav { padding: var(--space-4); }
  .nav-links { display: none; } /* replace with mobile menu in your implementation */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn-xl { padding: var(--space-4) var(--space-8); font-size: var(--text-md); }
}

@media (max-width: 480px) {
  :root {
    --text-3xl: 1.75rem;
    --text-4xl: 2rem;
  }
  .card { padding: var(--space-6); }
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
  body { background: white; color: black; }
  .nav, .btn, .hero-actions { display: none; }
}