/* ============================================================
   Apple Design System — Colors & Typography
   Source: apple.com visual audit (DESIGN-apple.md)
   Font note: SF Pro is Apple-proprietary. This sheet uses
   system-ui / -apple-system (resolves to real SF Pro on
   Apple platforms) with Inter as the non-Apple fallback.
   ============================================================ */

/* ── Google Fonts import (Inter fallback) ──────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

/* ── Base font stacks ──────────────────────────────────────── */
:root {
  --font-display: "SF Pro Display", system-ui, -apple-system,
                  BlinkMacSystemFont, "Inter", "Helvetica Neue",
                  Helvetica, Arial, sans-serif;
  --font-text:    "SF Pro Text", system-ui, -apple-system,
                  BlinkMacSystemFont, "Inter", "Helvetica Neue",
                  Helvetica, Arial, sans-serif;
  --font-icons:   "SF Pro Icons", system-ui, -apple-system, sans-serif;

  /* ── Primary Colors ──────────────────────────────────────── */
  --color-action-blue:      #0066cc; /* all CTAs, links, interactive elements */
  --color-focus-blue:       #0071e3; /* keyboard focus ring only */
  --color-sky-link-blue:    #2997ff; /* links on dark surfaces */
  --color-near-black-ink:   #1d1d1f; /* primary heading + body on light */

  /* ── Surface / Background Colors ────────────────────────────*/
  --color-white:            #ffffff;
  --color-parchment:        #f5f5f7; /* signature Apple off-white */
  --color-dark-tile-1:      #272729; /* primary dark tile */
  --color-dark-tile-2:      #2a2a2c; /* micro-lighter dark tile */
  --color-dark-tile-3:      #252527; /* micro-darker dark tile */
  --color-pure-black:       #000000; /* global nav, video backgrounds */

  /* ── Text Colors ─────────────────────────────────────────── */
  --color-text-primary:     #1d1d1f;          /* light surface */
  --color-text-on-dark:     #ffffff;          /* dark tile / nav */
  --color-text-muted-80:    rgba(0,0,0,0.80); /* body on pearl button */
  --color-text-muted-48:    rgba(0,0,0,0.48); /* disabled, fine print */

  /* ── Button / Component Colors ───────────────────────────── */
  --color-pearl-button:     #fafafc;          /* ghost button fill */
  --color-chip-gray:        rgba(210,210,215,0.64); /* control chips over photography */

  /* ── Border / Divider ─────────────────────────────────────── */
  --color-hairline:         rgba(0,0,0,0.08); /* utility card borders */
  --color-divider-4:        rgba(0,0,0,0.04); /* pearl button soft ring */

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-product:         rgba(0,0,0,0.22) 3px 5px 30px 0; /* product renders only */

  /* ── Border Radii ────────────────────────────────────────── */
  --radius-none:            0px;
  --radius-sm:              5px;   /* rare inline chip */
  --radius-utility-btn:     8px;   /* dark utility buttons, inner image corners */
  --radius-pearl-btn:       11px;  /* pearl / white capsule button */
  --radius-card:            18px;  /* store / accessory cards */
  --radius-circle:          50%;   /* floating control chips */
  --radius-pill:            980px; /* primary CTAs, search, option chips */

  /* ── Spacing Scale ───────────────────────────────────────── */
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  20px;
  --space-7:  24px;
  --space-8:  32px;
  --space-9:  40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;

  /* ── Breakpoints (reference, not CSS vars) ───────────────── */
  /* 640px phone | 734px tablet-portrait | 833px tablet-landscape |
     1068px small-desktop | 1440px desktop-max               */

  /* ── Semantic Surface Aliases ────────────────────────────── */
  --surface-page:           var(--color-white);
  --surface-alt:            var(--color-parchment);
  --surface-dark:           var(--color-dark-tile-1);
  --surface-nav:            var(--color-pure-black);
  --surface-subnav:         rgba(245,245,247,0.80); /* + backdrop-filter blur */
  --surface-card:           var(--color-white);

  /* ── Semantic Text Aliases ───────────────────────────────── */
  --text-heading:           var(--color-near-black-ink);
  --text-body:              var(--color-near-black-ink);
  --text-link:              var(--color-action-blue);
  --text-link-dark:         var(--color-sky-link-blue);
  --text-on-dark:           var(--color-white);
  --text-caption:           var(--color-text-muted-80);
  --text-disabled:          var(--color-text-muted-48);

  /* ── Semantic Interactive Aliases ────────────────────────── */
  --interactive-primary:    var(--color-action-blue);
  --interactive-focus:      var(--color-focus-blue);
  --interactive-press:      scale(0.95); /* always applied via transform */

  /* ── Extended Grey Palette ──────────────────────────────── */
  --color-bg-grey:             #ededef;              /* page, brands & footer bg */
  --color-bg-grey-nav:         rgba(237,237,239,0.72); /* nav frosted glass */
  --color-bg-grey-mid:         #ececef;              /* section background */
  --color-bg-grey-deep:        #e6e6e9;              /* section background (deep) */
  --color-bg-grey-darker:      #e4e4e7;              /* section bottom gradient */
  --color-bg-grey-soft:        #f3f3f5;              /* hero gradient lightest */
  --color-bg-grey-warm:        #e8e8ea;              /* hero gradient mid */
  --color-bg-grey-dim:         #dfdfe2;              /* hero gradient dark end */
  --color-bg-grey-reveal:      #f0f0f2;              /* product-reveal gradient light */
  --color-bg-grey-reveal-dark: #dcdce0;              /* product-reveal gradient dark */

  /* ── Extended Ink ─────────────────────────────────────────── */
  --color-ink-rich:            #0a0a0c;              /* headings on grey / neutral surfaces */

  /* ── Extended Border Radii ────────────────────────────────── */
  --radius-glass-card:         22px;                 /* benefit glass cards */
  --radius-product-card:       32px;                 /* product catalog cards */

  /* ── Extended Surface Aliases ────────────────────────────── */
  --surface-page-grey:         var(--color-bg-grey);
  --surface-brands:            var(--color-bg-grey);
  --surface-footer-grey:       var(--color-bg-grey);

  /* ── Extended Text Aliases ───────────────────────────────── */
  --text-heading-rich:         var(--color-ink-rich);
}

/* ============================================================
   TYPOGRAPHY TOKENS
   ============================================================ */

/* Hero Headline — 56px / 600 / lh 1.07 / ls -0.28px */
.t-hero {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.28px;
}

/* H1 / Tile Headline — 40px / 600 / lh 1.10 */
.t-h1 {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.10;
  letter-spacing: -0.28px;
}

/* H2 / Section — 34px / 600 / lh 1.47 / ls -0.374px */
.t-h2 {
  font-family: var(--font-text);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.47;
  letter-spacing: -0.374px;
}

/* Lead / Subhead — 28px / 400 / lh 1.14 / ls 0.196px */
.t-lead {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0.196px;
}

/* Large Lead — 24px / 300 / lh 1.50 (editorial / environment) */
.t-lead-lg {
  font-family: var(--font-text);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.50;
}

/* Sub-tile Tagline — 21px / 400–700 / lh 1.19 / ls 0.231px */
.t-tagline {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.19;
  letter-spacing: 0.231px;
}
.t-tagline--bold {
  font-weight: 700;
}

/* Body Strong — 17px / 600 / lh 1.24 / ls -0.374px */
.t-body-strong {
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.374px;
}

/* Body — 17px / 400 / lh 1.47 / ls -0.374px */
.t-body {
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: -0.374px;
}

/* Dense List — 17px / 400 / lh 2.41 (footer link stacks) */
.t-list {
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 2.41;
}

/* Caption / Meta — 14px / 400 / lh 1.43 / ls -0.224px */
.t-caption {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: -0.224px;
}

/* Caption Strong — 14px / 600 / lh 1.29 / ls -0.224px */
.t-caption-strong {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.29;
  letter-spacing: -0.224px;
}

/* Button Large — 18px / 300 / lh 1.00 (store hero CTAs) */
.t-btn-lg {
  font-family: var(--font-text);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.00;
}

/* Button Utility — 14px / 400 / lh 1.29 / ls -0.224px */
.t-btn-sm {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.29;
  letter-spacing: -0.224px;
}

/* Nav Text — 12px / 400 / lh 1.00 / ls -0.12px */
.t-nav {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.00;
  letter-spacing: -0.12px;
}

/* Fine Print — 12px / 400 / lh 1.00 / ls -0.12px */
.t-fine {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.00;
  letter-spacing: -0.12px;
}

/* Micro Legal — 10px / 400 / lh 1.30 / ls -0.08px */
.t-micro {
  font-family: var(--font-text);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.30;
  letter-spacing: -0.08px;
}

/* ============================================================
   GLOBAL BASE STYLES
   ============================================================ */

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

body {
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: -0.374px;
  color: var(--color-near-black-ink);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Semantic heading defaults ─────────────────────────────── */
h1 { font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 1.10; letter-spacing: -0.28px; }
h2 { font-family: var(--font-text);    font-size: 34px; font-weight: 600; line-height: 1.47; letter-spacing: -0.374px; }
h3 { font-family: var(--font-display); font-size: 28px; font-weight: 400; line-height: 1.14; letter-spacing: 0.196px; }
h4 { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: 0.231px; }
h5 { font-family: var(--font-text);    font-size: 17px; font-weight: 600; line-height: 1.24; letter-spacing: -0.374px; }
h6 { font-family: var(--font-text);    font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: -0.224px; }
p  { font-family: var(--font-text);    font-size: 17px; font-weight: 400; line-height: 1.47; letter-spacing: -0.374px; }
a  { color: var(--color-action-blue); text-decoration: none; }

/* ── Button base ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.1s ease;
  font-family: var(--font-text);
}
.btn:active { transform: scale(0.95); }
.btn:focus-visible { outline: 2px solid var(--color-focus-blue); outline-offset: 2px; }

/* Primary pill CTA — glass blue */
.btn-primary {
  background: rgba(0, 102, 204, 0.78);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(80, 160, 255, 0.30);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 10px 28px -6px rgba(0,102,204,0.38);
  color: #ffffff;
  font-size: 17px;
  font-weight: 400;
  border-radius: var(--radius-pill);
  padding: 11px 22px;
  transition: transform 0.1s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
  background: rgba(0, 102, 204, 0.92);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.28) inset,
    0 14px 36px -6px rgba(0,102,204,0.48);
  transform: translateY(-1px);
}

/* Ghost pill CTA — glass tinted */
.btn-ghost {
  background: rgba(0, 102, 204, 0.07);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(0, 102, 204, 0.28);
  box-shadow: 0 1px 0 rgba(255,255,255,0.50) inset;
  color: var(--color-action-blue);
  font-size: 17px;
  font-weight: 400;
  border-radius: var(--radius-pill);
  padding: 10px 21px;
  transition: transform 0.1s ease, background 0.2s ease;
}
.btn-ghost:hover {
  background: rgba(0, 102, 204, 0.14);
  transform: translateY(-1px);
}

/* Dark utility button — glass dark */
.btn-utility {
  background: rgba(10, 10, 12, 0.72);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 6px 18px -6px rgba(0,0,0,0.32);
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.224px;
  border-radius: var(--radius-utility-btn);
  padding: 8px 15px;
  transition: transform 0.1s ease, background 0.2s ease;
}
.btn-utility:hover {
  background: rgba(10, 10, 12, 0.88);
  transform: translateY(-1px);
}

/* Pearl / white capsule — glass white */
.btn-pearl {
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 4px 12px -4px rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.80);
  font-size: 14px;
  border-radius: var(--radius-pearl-btn);
  padding: 0 14px;
  height: 32px;
  transition: transform 0.1s ease, background 0.2s ease;
}
.btn-pearl:hover {
  background: rgba(255,255,255,0.82);
  transform: translateY(-1px);
}