/* ============================================================
   Apple-Inspired Design System — Tokens
   --------------------------------------------------------------
   Color & type custom properties.
   Font substitutions: SF Pro → Inter (display + text), SF Mono → JetBrains Mono.
   Flag: not the real Apple typefaces. Replace with SF Pro family if licensed.
   ============================================================ */

/* Webfonts (Google Fonts substitutes) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Color: Neutrals ---- */
  --apple-white:        #FFFFFF;
  --apple-near-white:   #FBFBFD;   /* canonical apple.com bg */
  --apple-light-gray:   #F5F5F7;   /* card / hero backdrop */
  --apple-gray-100:     #EEEEF0;
  --apple-gray-200:     #D2D2D7;   /* hairline divider */
  --apple-gray-300:     #B0B0B5;
  --apple-gray-400:     #86868B;   /* secondary text */
  --apple-gray-500:     #6E6E73;
  --apple-gray-600:     #424245;
  --apple-gray-700:     #2C2C2E;
  --apple-near-black:   #1D1D1F;   /* canonical text */
  --apple-black:        #000000;

  /* ---- Color: Accents ---- */
  --apple-blue:         #0071E3;   /* primary accent / link / store CTA */
  --apple-blue-hover:   #0077ED;
  --apple-blue-press:   #006EDB;
  --apple-blue-soft:    rgba(0, 113, 227, 0.12);

  /* ---- Color: Semantic (iOS system colors) ---- */
  --apple-red:          #FF3B30;   /* destructive */
  --apple-orange:       #FF9500;   /* warning */
  --apple-yellow:       #FFCC00;
  --apple-green:        #34C759;   /* success */
  --apple-teal:         #5AC8FA;
  --apple-indigo:       #5856D6;
  --apple-purple:       #AF52DE;
  --apple-pink:         #FF2D55;

  /* ---- Semantic foreground / background ---- */
  --bg:                 var(--apple-near-white);
  --bg-elevated:        var(--apple-white);
  --bg-subtle:          var(--apple-light-gray);
  --bg-inverse:         var(--apple-near-black);

  --fg:                 var(--apple-near-black);
  --fg-secondary:       var(--apple-gray-400);
  --fg-tertiary:        var(--apple-gray-300);
  --fg-inverse:         var(--apple-white);

  --border:             var(--apple-gray-200);
  --link:               var(--apple-blue);

  /* ---- Type families ---- */
  --font-display:       'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-text:          'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --font-mono:          'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Monaco, monospace;

  /* ---- Type scale ---- */
  --text-eyebrow:       12px;
  --text-caption:       12px;
  --text-small:         14px;
  --text-body:          17px;     /* apple.com body baseline */
  --text-body-large:    19px;
  --text-lead:          21px;
  --text-h6:            21px;
  --text-h5:            24px;
  --text-h4:            32px;
  --text-h3:            40px;
  --text-h2:            56px;
  --text-h1:            72px;
  --text-display:       96px;

  /* ---- Line heights ---- */
  --lh-tight:           1.05;
  --lh-snug:            1.15;
  --lh-normal:          1.4;
  --lh-relaxed:         1.6;

  /* ---- Tracking ---- */
  --track-display:      -0.04em;
  --track-tight:        -0.022em;
  --track-normal:       -0.011em;
  --track-eyebrow:      0.1em;

  /* ---- Spacing (8pt) ---- */
  --space-1:            4px;
  --space-2:            8px;
  --space-3:            12px;
  --space-4:            16px;
  --space-5:            24px;
  --space-6:            32px;
  --space-7:            48px;
  --space-8:            64px;
  --space-9:            96px;
  --space-10:           128px;
  --space-11:           192px;

  /* ---- Radii ---- */
  --radius-sm:          6px;
  --radius-md:          12px;
  --radius-lg:          18px;     /* iOS large card */
  --radius-xl:          24px;
  --radius-pill:        980px;
  --radius-squircle:    22%;      /* iOS app icon (approx) */

  /* ---- Shadows ---- */
  --shadow-none:        none;
  --shadow-sm:          0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:          0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg:          0 12px 40px rgba(0, 0, 0, 0.12);    /* iOS modal */
  --shadow-xl:          0 24px 64px rgba(0, 0, 0, 0.16);

  /* ---- Motion ---- */
  --ease-apple:         cubic-bezier(0.32, 0.72, 0, 1);     /* signature */
  --ease-standard:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:           cubic-bezier(0, 0, 0.2, 1);
  --ease-in:            cubic-bezier(0.4, 0, 1, 1);
  --duration-fast:      160ms;
  --duration-base:      240ms;
  --duration-slow:      400ms;
  --duration-hero:      900ms;

  /* ---- Backdrop / glass ---- */
  --glass-blur:         saturate(180%) blur(20px);
  --glass-bg:           rgba(255, 255, 255, 0.72);
  --glass-bg-dark:      rgba(29, 29, 31, 0.72);

  /* ---- Layout ---- */
  --container-narrow:   692px;
  --container-default:  980px;
  --container-wide:     1440px;
  --gutter:             max(22px, 4vw);
  --nav-height:         44px;
}

/* ============================================================
   Semantic / element styles
   ============================================================ */

html {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

.h1, h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--fg);
}

.h2, h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
}

.h3, h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
}

.h4, h4 {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
}

.h5, h5 {
  font-family: var(--font-text);
  font-size: var(--text-h5);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
}

.h6, h6 {
  font-family: var(--font-text);
  font-size: var(--text-h6);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.display, .hero-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: var(--track-display);
}

.body, p {
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  color: var(--fg);
}

.lead {
  font-size: var(--text-lead);
  line-height: var(--lh-normal);
  color: var(--fg);
  font-weight: 400;
}

.caption, small {
  font-size: var(--text-caption);
  color: var(--fg-secondary);
  line-height: var(--lh-normal);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a, .link {
  color: var(--link);
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

a:hover, .link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

hr, .hairline {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* Model section — centered tiles */
.lantoro-model-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px) {
  .lantoro-model-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.lantoro-model-tile {
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  min-height: 360px;
}
@media (min-width: 640px) {
  .lantoro-model-tile {
    padding: 56px 40px;
    min-height: 440px;
  }
}