/* ============================================================
   District 52 — Design Tokens
   Apple-inspired gallery aesthetic: photography-first,
   single Action Blue accent, SF Pro typography, edge-to-edge tiles.
   ============================================================ */

:root {
  /* ---------- COLORS ---------- */

  /* Brand & accent — the ONLY interactive color */
  --color-primary:           #0066cc; /* Action Blue */
  --color-primary-focus:     #0071e3; /* Focus ring */
  --color-primary-on-dark:   #2997ff; /* Sky link blue, dark surfaces */

  /* Text */
  --color-ink:               #1d1d1f; /* Near-black headlines + body on light */
  --color-body:              #1d1d1f;
  --color-body-on-dark:      #ffffff;
  --color-body-muted:        #cccccc; /* secondary copy on dark */
  --color-ink-muted-80:      #333333; /* softened ink */
  --color-ink-muted-48:      #7a7a7a; /* disabled / legal */

  /* Hairlines */
  --color-divider-soft:      #f0f0f0;
  --color-hairline:          #e0e0e0;

  /* Surfaces */
  --color-canvas:            #ffffff;
  --color-canvas-parchment:  #f5f5f7;
  --color-surface-pearl:     #fafafc;
  --color-surface-tile-1:    #272729;
  --color-surface-tile-2:    #2a2a2c;
  --color-surface-tile-3:    #252527;
  --color-surface-black:     #000000;
  --color-surface-chip-translucent: rgba(210, 210, 215, 0.64);

  /* On-color foregrounds */
  --color-on-primary:        #ffffff;
  --color-on-dark:           #ffffff;

  /* ---------- SHADOWS ---------- */
  /* Apple uses EXACTLY ONE shadow — under product photography */
  --shadow-product: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;
  --shadow-none: none;

  /* ---------- RADII ---------- */
  --radius-none: 0px;
  --radius-xs:   5px;
  --radius-sm:   8px;
  --radius-md:   11px;
  --radius-lg:   18px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* ---------- SPACING (8-base, with 17/4) ---------- */
  --space-xxs:     4px;
  --space-xs:      8px;
  --space-sm:      12px;
  --space-md:      17px;
  --space-lg:      24px;
  --space-xl:      32px;
  --space-xxl:     48px;
  --space-section: 80px;

  /* ---------- TYPE — families ---------- */
  --font-display: "SF Pro Display", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-text:    "SF Pro Text", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ---------- TYPE — semantic roles ----------
     The system has 16 typography tokens. Each role is fully expressed
     (size / weight / line-height / letter-spacing) so callers don't have
     to redeclare. */

  /* Hero — the signature "Apple tight" cadence */
  --type-hero-display: 600 56px/1.07 var(--font-display);
  --type-hero-display-ls: -0.28px;

  /* Display large — tile headlines */
  --type-display-lg: 600 40px/1.10 var(--font-display);
  --type-display-lg-ls: 0px;

  /* Display medium — section heads (Text variant) */
  --type-display-md: 600 34px/1.47 var(--font-text);
  --type-display-md-ls: -0.374px;

  /* Lead — product subcopy */
  --type-lead: 400 28px/1.14 var(--font-display);
  --type-lead-ls: 0.196px;

  /* Lead airy — environmental copy (rare weight 300) */
  --type-lead-airy: 300 24px/1.5 var(--font-text);
  --type-lead-airy-ls: 0px;

  /* Tagline — sub-tile / sub-nav category */
  --type-tagline: 600 21px/1.19 var(--font-display);
  --type-tagline-ls: 0.231px;

  /* Body strong */
  --type-body-strong: 600 17px/1.24 var(--font-text);
  --type-body-strong-ls: -0.374px;

  /* Body — DEFAULT paragraph at 17px (not 16) */
  --type-body: 400 17px/1.47 var(--font-text);
  --type-body-ls: -0.374px;

  /* Dense link — relaxed 2.41 leading for footer columns */
  --type-dense-link: 400 17px/2.41 var(--font-text);
  --type-dense-link-ls: 0px;

  /* Caption */
  --type-caption: 400 14px/1.43 var(--font-text);
  --type-caption-ls: -0.224px;
  --type-caption-strong: 600 14px/1.29 var(--font-text);
  --type-caption-strong-ls: -0.224px;

  /* Buttons */
  --type-button-large: 300 18px/1.0 var(--font-text); /* rare weight 300 */
  --type-button-large-ls: 0px;
  --type-button-utility: 400 14px/1.29 var(--font-text);
  --type-button-utility-ls: -0.224px;

  /* Fine print + legal + nav */
  --type-fine-print: 400 12px/1.0 var(--font-text);
  --type-fine-print-ls: -0.12px;
  --type-micro-legal: 400 10px/1.3 var(--font-text);
  --type-micro-legal-ls: -0.08px;
  --type-nav-link: 400 12px/1.0 var(--font-text);
  --type-nav-link-ls: -0.12px;
}

/* ============================================================
   Element defaults — give h1/h2/body/etc. the right voice
   when consumers just use raw HTML.
   ============================================================ */

html, body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-body);
  font: var(--type-body);
  letter-spacing: var(--type-body-ls);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .t-hero {
  font: var(--type-hero-display);
  letter-spacing: var(--type-hero-display-ls);
  color: var(--color-ink);
  margin: 0;
}

h2, .t-display-lg {
  font: var(--type-display-lg);
  letter-spacing: var(--type-display-lg-ls);
  color: var(--color-ink);
  margin: 0;
}

h3, .t-display-md {
  font: var(--type-display-md);
  letter-spacing: var(--type-display-md-ls);
  color: var(--color-ink);
  margin: 0;
}

h4, .t-tagline {
  font: var(--type-tagline);
  letter-spacing: var(--type-tagline-ls);
  color: var(--color-ink);
  margin: 0;
}

p, .t-body {
  font: var(--type-body);
  letter-spacing: var(--type-body-ls);
  color: var(--color-body);
}

.t-lead     { font: var(--type-lead);      letter-spacing: var(--type-lead-ls); }
.t-lead-airy{ font: var(--type-lead-airy); letter-spacing: var(--type-lead-airy-ls); }
.t-body-strong { font: var(--type-body-strong); letter-spacing: var(--type-body-strong-ls); }
.t-caption  { font: var(--type-caption);   letter-spacing: var(--type-caption-ls); }
.t-caption-strong { font: var(--type-caption-strong); letter-spacing: var(--type-caption-strong-ls); }
.t-fine     { font: var(--type-fine-print); letter-spacing: var(--type-fine-print-ls); color: var(--color-ink-muted-48); }
.t-legal    { font: var(--type-micro-legal); letter-spacing: var(--type-micro-legal-ls); color: var(--color-ink-muted-48); }
.t-nav      { font: var(--type-nav-link);  letter-spacing: var(--type-nav-link-ls); }
.t-dense    { font: var(--type-dense-link); letter-spacing: var(--type-dense-link-ls); }

a, .link {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover, .link:hover { text-decoration: underline; }

.on-dark a, a.on-dark, .link.on-dark { color: var(--color-primary-on-dark); }

/* ============================================================
   Surface helpers
   ============================================================ */
.bg-canvas     { background: var(--color-canvas);          color: var(--color-ink); }
.bg-parchment  { background: var(--color-canvas-parchment); color: var(--color-ink); }
.bg-pearl      { background: var(--color-surface-pearl);   color: var(--color-ink); }
.bg-tile-1     { background: var(--color-surface-tile-1);  color: var(--color-on-dark); }
.bg-tile-2     { background: var(--color-surface-tile-2);  color: var(--color-on-dark); }
.bg-tile-3     { background: var(--color-surface-tile-3);  color: var(--color-on-dark); }
.bg-black      { background: var(--color-surface-black);   color: var(--color-on-dark); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  cursor: pointer;
  font: var(--type-body);
  letter-spacing: var(--type-body-ls);
  transition: transform 120ms ease;
  text-decoration: none;
}
.btn:active { transform: scale(0.95); } /* system-wide micro-interaction */
.btn:focus-visible {
  outline: 2px solid var(--color-primary-focus);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-pill);
  padding: 11px 22px;
}
.btn-primary:hover { background: #0077e6; } /* small lift — no hex shift per docs but UX needs feedback */

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-pill);
  padding: 10px 21px; /* 1px less to account for border */
}

.btn-dark-utility {
  background: var(--color-ink);
  color: var(--color-on-dark);
  font: var(--type-button-utility);
  letter-spacing: var(--type-button-utility-ls);
  border-radius: var(--radius-sm);
  padding: 8px 15px;
}

.btn-pearl {
  background: var(--color-surface-pearl);
  color: var(--color-ink-muted-80);
  font: var(--type-caption);
  letter-spacing: var(--type-caption-ls);
  box-shadow: 0 0 0 1px var(--color-divider-soft) inset;
  border-radius: var(--radius-md);
  padding: 8px 14px;
}

.btn-store-hero {
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: var(--type-button-large);
  letter-spacing: var(--type-button-large-ls);
  border-radius: var(--radius-pill);
  padding: 14px 28px;
}

.btn-icon-circular {
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-surface-chip-translucent);
  color: var(--color-ink);
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ============================================================
   Cards & nav
   ============================================================ */
.card-utility {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.nav-global {
  background: var(--color-surface-black);
  color: var(--color-on-dark);
  height: 44px;
  display: flex; align-items: center;
  font: var(--type-nav-link);
  letter-spacing: var(--type-nav-link-ls);
}

.nav-sub {
  background: rgba(245, 245, 247, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  color: var(--color-ink);
  height: 52px;
  display: flex; align-items: center;
}

/* ============================================================
   Section rhythm
   ============================================================ */
.tile {
  padding: var(--space-section) var(--space-xxl);
  text-align: center;
}
@media (max-width: 833px) {
  .tile { padding: 48px 24px; }
}