/* ============================================================
   Able Canyon Commerce — Foundations
   Colors & Type tokens (from Claude Design System)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Brand primaries ---------- */
  --ac-fuchsia:   #ea4298;
  --ac-blue:      #30a5dd;
  --ac-green:     #84c441;
  --ac-yellow:    #fecf33;
  --ac-graphite:  #444445;

  /* ---------- Tints & shades ---------- */
  --ac-fuchsia-50:  #fde7f1;
  --ac-fuchsia-100: #fbcbe0;
  --ac-fuchsia-300: #f283b8;
  --ac-fuchsia-500: #ea4298;
  --ac-fuchsia-700: #c41f76;
  --ac-fuchsia-900: #7c0d49;

  --ac-blue-50:   #e6f4fc;
  --ac-blue-100:  #c3e5f7;
  --ac-blue-300:  #7fc6ec;
  --ac-blue-500:  #30a5dd;
  --ac-blue-700:  #1879aa;
  --ac-blue-900:  #0b4768;

  --ac-green-50:  #eef8e1;
  --ac-green-100: #d8eeba;
  --ac-green-300: #aedc7b;
  --ac-green-500: #84c441;
  --ac-green-700: #5e9226;
  --ac-green-900: #355611;

  --ac-yellow-50:  #fff7d4;
  --ac-yellow-100: #ffeea6;
  --ac-yellow-300: #fedd6a;
  --ac-yellow-500: #fecf33;
  --ac-yellow-700: #d6a200;
  --ac-yellow-900: #7d5d00;

  /* ---------- Neutrals ---------- */
  --ac-ink-0:    #ffffff;
  --ac-ink-50:   #f7f7f8;
  --ac-ink-100:  #ececee;
  --ac-ink-200:  #dadadd;
  --ac-ink-300:  #b9b9bd;
  --ac-ink-400:  #8a8a8f;
  --ac-ink-500:  #65656a;
  --ac-ink-600:  #4e4e52;
  --ac-ink-700:  #444445;
  --ac-ink-800:  #2c2c2e;
  --ac-ink-900:  #161618;

  --ac-sand-50:  #fbfaf6;
  --ac-sand-100: #f4f1e8;
  --ac-sand-200: #ece7d4;

  /* ---------- Semantic ---------- */
  --bg:          var(--ac-ink-0);
  --bg-subtle:   var(--ac-sand-50);
  --bg-muted:    var(--ac-ink-50);
  --bg-inverse:  var(--ac-ink-900);

  --surface:        var(--ac-ink-0);
  --surface-raised: var(--ac-ink-0);
  --surface-sunken: var(--ac-ink-50);

  --fg:          var(--ac-ink-900);
  --fg1:         var(--ac-ink-900);
  --fg2:         var(--ac-ink-700);
  --fg3:         var(--ac-ink-500);
  --fg-muted:    var(--ac-ink-400);
  --fg-inverse:  var(--ac-ink-0);
  --fg-on-brand: var(--ac-ink-0);

  --border:        var(--ac-ink-200);
  --border-strong: var(--ac-ink-300);
  --border-subtle: var(--ac-ink-100);

  --accent:           var(--ac-blue-500);
  --accent-hover:     var(--ac-blue-700);
  --accent-press:     var(--ac-blue-900);
  --accent-soft:      var(--ac-blue-50);
  --accent-fg:        #ffffff;

  --success: var(--ac-green-700);
  --success-soft: var(--ac-green-50);
  --warning: var(--ac-yellow-700);
  --warning-soft: var(--ac-yellow-50);
  --danger:  var(--ac-fuchsia-700);
  --danger-soft: var(--ac-fuchsia-50);
  --info:    var(--ac-blue-700);
  --info-soft: var(--ac-blue-50);

  --ring: 0 0 0 3px rgba(48, 165, 221, 0.35);

  /* ---------- Type families ---------- */
  --font-display:  'Space Grotesk', system-ui, sans-serif;
  --font-body:     'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-38: 2.375rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-88: 5.5rem;

  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --ls-tighter: -0.03em;
  --ls-tight:   -0.015em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-eyebrow: 0.12em;

  /* ---------- Spacing ---------- */
  --sp-0:  0;
  --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;
  --sp-24: 6rem;

  /* ---------- Radii ---------- */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs:  0 1px 1px rgba(40, 30, 20, 0.05);
  --shadow-sm:  0 1px 2px rgba(40, 30, 20, 0.06), 0 1px 1px rgba(40, 30, 20, 0.04);
  --shadow-md:  0 4px 12px -2px rgba(40, 30, 20, 0.08), 0 2px 4px rgba(40, 30, 20, 0.04);
  --shadow-lg:  0 16px 32px -8px rgba(40, 30, 20, 0.12), 0 4px 8px rgba(40, 30, 20, 0.05);
  --shadow-xl:  0 28px 56px -12px rgba(40, 30, 20, 0.18), 0 8px 16px rgba(40, 30, 20, 0.06);
  --shadow-brand: 0 18px 40px -16px rgba(48, 165, 221, 0.45);
  --shadow-inset: inset 0 1px 0 rgba(40, 30, 20, 0.06);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.45, 1);
  --dur-1: 90ms;
  --dur-2: 160ms;
  --dur-3: 240ms;
  --dur-4: 360ms;

  --grad-sky:    linear-gradient(180deg, var(--ac-blue-50), var(--ac-ink-0) 70%);
  --grad-warm:   linear-gradient(180deg, var(--ac-sand-200), var(--ac-sand-50) 70%);
  --grad-blue:   linear-gradient(180deg, var(--ac-blue-700), var(--ac-blue-900));
}

/* Discrete four-color "canyon bars" */
.ac-bars {
  display: flex;
  height: 6px;
  width: 100%;
}
.ac-bars > * { flex: 1 1 0; }
.ac-bars > :nth-child(1) { background: var(--ac-fuchsia); }
.ac-bars > :nth-child(2) { background: var(--ac-blue); }
.ac-bars > :nth-child(3) { background: var(--ac-green); }
.ac-bars > :nth-child(4) { background: var(--ac-yellow); }

/* ============================================================
   Element styles
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  font-size: 16px;
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

.display, h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(var(--fs-48), 6vw, var(--fs-88));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: var(--fg1);
  text-wrap: balance;
  margin: 0;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg1);
  text-wrap: balance;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-38);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg1);
  text-wrap: balance;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg1);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg1);
  margin: 0;
}

h5, .h5 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg1);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg3);
}

.lede, p.lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
  text-wrap: pretty;
  margin: 0;
}

p, .p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
  text-wrap: pretty;
  margin: 0;
}

.small, small {
  font-size: var(--fs-14);
  color: var(--fg3);
}

.micro {
  font-size: var(--fs-12);
  color: var(--fg3);
  letter-spacing: 0.01em;
}

code, kbd, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ac-ink-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xs);
  padding: 0.08em 0.36em;
  color: var(--ac-ink-800);
}

::selection {
  background: var(--ac-yellow-300);
  color: var(--ac-ink-900);
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

/* Utility: visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--ac-ink-900);
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: var(--r-md);
  font-weight: 600;
  z-index: 1000;
}
.skip-link:focus { left: 16px; }