/* ============================================================
   BASE.CSS — Reset, CSS Variables, Typography
   Shopify Webs Developer — Shopify Agency Website
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('./pages/nav.css');

/* ── CSS Custom Properties ────────────────────────────────── */
:root {
  /* Backgrounds */
  --color-bg-dark:        #FFFFFF;
  --color-bg-surface:     #F8FAFB;
  --color-bg-elevated:    #F0F2F0;
  --color-bg-light:       #F5F5F5;

  /* Shopify Green — primary actions */
  --color-accent-primary: #95BF47;
  --color-accent-dark:    #5E8E3E;
  --color-accent-subtle:  rgba(149, 191, 71, 0.12);
  --color-accent-text:    #1A1F1C;

  /* Shopify Violet — secondary accent */
  --color-violet:         #5A31F4;
  --color-violet-hover:   #4526C4;
  --color-violet-subtle:  rgba(90, 49, 244, 0.08);

  /* Shopify Blue — tertiary / info */
  --color-blue:           #479CCF;
  --color-blue-subtle:    rgba(71, 156, 207, 0.08);

  /* Text */
  --color-text-primary:   #1A1F1C;
  --color-text-secondary: #4B5563;
  --color-text-muted:     #9CA3AF;

  /* Borders */
  --color-border:         #E2E8E0;
  --color-border-accent:  rgba(149, 191, 71, 0.35);
  --color-border-violet:  rgba(90, 49, 244, 0.25);

  /* Semantic */
  --color-white:          #FFFFFF;
  --color-success:        #95BF47;
  --color-warning:        #F59E0B;
  --color-danger:         #E32020;

  /* Footer (always dark) */
  --color-footer-bg:      #1A1F1C;

  /* Fonts */
  --font-display: 'Hanken Grotesk', sans-serif;
  --font-body:    'Hanken Grotesk', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Type scale — 17px body minimum for readability (WCAG-friendly) */
  --text-xs:   13px;
  --text-sm:   15px;
  --text-base: 17px;
  --text-md:   19px;
  --text-lg:   23px;
  --text-xl:   29px;
  --text-2xl:  38px;
  --text-3xl:  52px;
  --text-4xl:  68px;
  --text-hero: 92px;

  /* Spacing */
  --topbar-h: 39px;
  --section-pad: 100px;
  --container-max: 1200px;
  --gap-card: 24px;
  --radius-card: 16px;
  --radius-btn: 8px;
  --radius-pill: 100px;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-text-secondary);
  background-color: var(--color-bg-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover { color: var(--color-accent-primary); }

ul, ol { list-style: none; }

button { cursor: pointer; font-family: var(--font-display); }

input, textarea, select {
  font-family: var(--font-body);
  font-size: var(--text-base);
}

/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

h1 { font-size: var(--text-4xl); font-weight: 800; }
h2 { font-size: var(--text-2xl); font-weight: 700; }
h3 { font-size: var(--text-xl);  font-weight: 600; }
h4 { font-size: var(--text-lg);  font-weight: 600; }
h5 { font-size: var(--text-md);  font-weight: 600; }
h6 { font-size: var(--text-base); font-weight: 600; }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

.hero-h1 {
  font-size: var(--text-hero);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.text-mono {
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }

.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-accent    { color: var(--color-accent-primary); }
.text-violet    { color: var(--color-violet); }

/* ── Page Transitions ─────────────────────────────────────── */
body.page-enter {
  animation: page-fade-in 0.3s ease forwards;
}
body.page-exit {
  animation: page-fade-out 0.2s ease forwards;
}
@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes page-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── Focus Styles (Accessibility) ────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-dark); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent-primary); }

/* ── Mobile adjustments ───────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    /* Tightened from 60px: at 60 a phone had to scroll roughly twelve
       viewport-heights to reach the footer, and most of that was
       padding rather than content. */
    --section-pad: 44px;
    --gap-card: 14px;
    --text-hero: 52px;
    --text-4xl: 42px;
    --text-3xl: 34px;
    --text-2xl: 28px;
  }
  h1 { font-size: var(--text-4xl); }
  .hero-h1 { font-size: var(--text-hero); }
}

@media (max-width: 480px) {
  :root {
    --section-pad: 38px;
    --text-hero: 42px;
    --text-4xl: 34px;
  }
}