/* ============================================================
   ULTRA MODE — Foundations
   Colors, type, spacing, motion, elevation.
   Apple-clean primary, with retro-futurist accents reserved
   for display type and editorial moments.
   ============================================================ */

/* ---------- FONTS ----------
   Primary: Inter (substitute for SF Pro Display / Text)
   Mono:    JetBrains Mono (substitute for SF Mono)
   Display accent: Space Grotesque (wider, tech-leaning) used
                   sparingly for retro-futurist moments.
   ⚠ Substitution flagged in README — swap to SF Pro / SF Mono
     if license permits.
*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  /* ============================================================
     COLOR — Neutrals (Apple-style stepped grayscale)
     ============================================================ */
  --um-black:       #0a0a0a;   /* near-black, true OLED feel */
  --um-ink:         #1d1d1f;   /* Apple's primary text black */
  --um-graphite:    #2c2c2e;
  --um-slate:       #3a3a3c;
  --um-stone:       #6e6e73;   /* Apple secondary text */
  --um-silver:      #86868b;   /* Apple muted gray */
  --um-fog:         #aeaeb2;
  --um-mist:        #d2d2d7;   /* Apple divider gray */
  --um-bone:        #e8e8ed;
  --um-paper:       #f5f5f7;   /* Apple page bg */
  --um-white:       #ffffff;

  /* ============================================================
     COLOR — Signature Accents
     ============================================================ */
  --um-blue:        #0071e3;   /* Apple Buy-button blue, our primary CTA */
  --um-blue-deep:   #0058b8;
  --um-blue-soft:   #2997ff;   /* link / focus */
  --um-blue-fog:    #e8f1fc;   /* tinted bg */

  --um-ultra:       #ff5a1f;   /* "Ultra Orange" — review scores, hot takes */
  --um-ultra-deep:  #d63d00;
  --um-ultra-soft:  #ff8a5b;
  --um-ultra-fog:   #fff2eb;

  /* ============================================================
     COLOR — Semantic
     ============================================================ */
  --um-positive:    #28a745;
  --um-warning:     #ffb800;
  --um-negative:    #ff3b30;
  --um-info:        var(--um-blue);

  /* ============================================================
     COLOR — Surfaces (light theme defaults)
     ============================================================ */
  --um-bg:          var(--um-paper);
  --um-bg-elevated: var(--um-white);
  --um-bg-sunken:   var(--um-bone);
  --um-bg-inverse:  var(--um-black);

  --um-fg:          var(--um-ink);      /* primary text */
  --um-fg-muted:    var(--um-stone);    /* secondary */
  --um-fg-faint:    var(--um-silver);   /* tertiary */
  --um-fg-inverse:  var(--um-white);

  --um-border:           rgba(0, 0, 0, 0.08);
  --um-border-strong:    rgba(0, 0, 0, 0.16);
  --um-border-inverse:   rgba(255, 255, 255, 0.10);

  /* ============================================================
     TYPE — Families
     ============================================================ */
  --um-font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
  --um-font-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --um-font-tech:    "Space Grotesk", "Inter", system-ui, sans-serif;   /* retro-futurist accent */
  --um-font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* ============================================================
     TYPE — Scale (modular, generous, Apple-style)
     Display sizes are tight-tracked (-0.04em+) like SF Pro.
     ============================================================ */
  --um-text-xs:    11px;
  --um-text-sm:    13px;
  --um-text-base:  15px;
  --um-text-md:    17px;   /* Apple body default */
  --um-text-lg:    19px;
  --um-text-xl:    22px;
  --um-text-2xl:   28px;
  --um-text-3xl:   36px;
  --um-text-4xl:   48px;
  --um-text-5xl:   64px;
  --um-text-6xl:   84px;
  --um-text-7xl:   112px;
  --um-text-8xl:   144px;

  /* Line heights */
  --um-lh-tight:    1.05;
  --um-lh-snug:     1.18;
  --um-lh-normal:   1.45;
  --um-lh-relaxed:  1.62;

  /* Letter-spacing (Apple negatives on display, positives on eyebrow caps) */
  --um-tracking-tightest: -0.045em;
  --um-tracking-tighter:  -0.03em;
  --um-tracking-tight:    -0.015em;
  --um-tracking-normal:   0em;
  --um-tracking-wide:     0.04em;
  --um-tracking-wider:    0.12em;
  --um-tracking-widest:   0.22em;

  /* Weights */
  --um-w-light:    300;
  --um-w-regular:  400;
  --um-w-medium:   500;
  --um-w-semibold: 600;
  --um-w-bold:     700;
  --um-w-heavy:    800;
  --um-w-black:    900;

  /* ============================================================
     SPACING (4px base)
     ============================================================ */
  --um-space-0:   0;
  --um-space-1:   4px;
  --um-space-2:   8px;
  --um-space-3:   12px;
  --um-space-4:   16px;
  --um-space-5:   20px;
  --um-space-6:   24px;
  --um-space-8:   32px;
  --um-space-10:  40px;
  --um-space-12:  48px;
  --um-space-16:  64px;
  --um-space-20:  80px;
  --um-space-24:  96px;
  --um-space-32:  128px;
  --um-space-40:  160px;

  /* ============================================================
     RADII (Apple's rounded-rect "squircle" feel)
     ============================================================ */
  --um-r-xs:     4px;
  --um-r-sm:     8px;
  --um-r-md:     12px;
  --um-r-lg:     18px;
  --um-r-xl:     24px;
  --um-r-2xl:    32px;
  --um-r-pill:   999px;

  /* ============================================================
     ELEVATION
     Soft, low-contrast, tight (Apple-style, not Material).
     ============================================================ */
  --um-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --um-shadow-sm: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --um-shadow-md: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  --um-shadow-lg: 0 24px 56px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
  --um-shadow-xl: 0 40px 96px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.08);

  /* Inner highlight (chrome / glassy press states) */
  --um-inner-hi:  inset 0 1px 0 rgba(255,255,255,0.6);
  --um-inner-lo:  inset 0 -1px 0 rgba(0,0,0,0.04);

  /* ============================================================
     MOTION — calm, purposeful, Apple spring
     ============================================================ */
  --um-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --um-ease-in:    cubic-bezier(0.55, 0, 0.68, 0.06);
  --um-ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --um-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --um-dur-fast:    140ms;
  --um-dur-base:    220ms;
  --um-dur-slow:    420ms;
  --um-dur-deliberate: 700ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --um-content-width:  720px;     /* article reading width */
  --um-page-width:     1200px;    /* marketing layout cap */
  --um-page-wide:      1440px;    /* hero / wide sections */
  --um-gutter:         24px;
}

/* ============================================================
   DARK THEME — for video player chrome, hero sections
   ============================================================ */
.um-dark, [data-theme="dark"] {
  --um-bg:          var(--um-black);
  --um-bg-elevated: #1f1f22;
  --um-bg-sunken:   #000000;
  --um-bg-inverse:  var(--um-white);

  --um-fg:          var(--um-white);
  --um-fg-muted:    var(--um-fog);
  --um-fg-faint:    var(--um-silver);
  --um-fg-inverse:  var(--um-ink);

  --um-border:        rgba(255, 255, 255, 0.10);
  --um-border-strong: rgba(255, 255, 255, 0.18);
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Use these classes/vars directly; don't restyle elements.
   ============================================================ */
.um-eyebrow {
  font-family: var(--um-font-mono);
  font-size: var(--um-text-xs);
  font-weight: var(--um-w-medium);
  letter-spacing: var(--um-tracking-widest);
  text-transform: uppercase;
  color: var(--um-fg-muted);
}

.um-display-1, h1.um-display {
  font-family: var(--um-font-display);
  font-size: clamp(48px, 8vw, var(--um-text-8xl));
  font-weight: var(--um-w-heavy);
  line-height: var(--um-lh-tight);
  letter-spacing: var(--um-tracking-tightest);
  color: var(--um-fg);
}

.um-display-2 {
  font-family: var(--um-font-display);
  font-size: clamp(40px, 6vw, var(--um-text-6xl));
  font-weight: var(--um-w-heavy);
  line-height: var(--um-lh-tight);
  letter-spacing: var(--um-tracking-tightest);
  color: var(--um-fg);
}

.um-display-3 {
  font-family: var(--um-font-display);
  font-size: clamp(32px, 4.5vw, var(--um-text-5xl));
  font-weight: var(--um-w-heavy);
  line-height: var(--um-lh-tight);
  letter-spacing: var(--um-tracking-tightest);
  color: var(--um-fg);
}

.um-h1 {
  font-family: var(--um-font-sans);
  font-size: var(--um-text-5xl);
  font-weight: var(--um-w-bold);
  line-height: var(--um-lh-tight);
  letter-spacing: var(--um-tracking-tighter);
  color: var(--um-fg);
}

.um-h2 {
  font-family: var(--um-font-sans);
  font-size: var(--um-text-4xl);
  font-weight: var(--um-w-bold);
  line-height: var(--um-lh-snug);
  letter-spacing: var(--um-tracking-tight);
  color: var(--um-fg);
}

.um-h3 {
  font-family: var(--um-font-sans);
  font-size: var(--um-text-3xl);
  font-weight: var(--um-w-semibold);
  line-height: var(--um-lh-snug);
  letter-spacing: var(--um-tracking-tight);
  color: var(--um-fg);
}

.um-h4 {
  font-family: var(--um-font-sans);
  font-size: var(--um-text-2xl);
  font-weight: var(--um-w-semibold);
  line-height: var(--um-lh-snug);
  letter-spacing: var(--um-tracking-tight);
  color: var(--um-fg);
}

.um-h5 {
  font-family: var(--um-font-sans);
  font-size: var(--um-text-xl);
  font-weight: var(--um-w-semibold);
  line-height: var(--um-lh-snug);
  color: var(--um-fg);
}

.um-lede {
  font-family: var(--um-font-sans);
  font-size: var(--um-text-xl);
  font-weight: var(--um-w-regular);
  line-height: var(--um-lh-normal);
  letter-spacing: var(--um-tracking-tight);
  color: var(--um-fg-muted);
}

.um-body {
  font-family: var(--um-font-sans);
  font-size: var(--um-text-md);
  font-weight: var(--um-w-regular);
  line-height: var(--um-lh-relaxed);
  color: var(--um-fg);
}

.um-body-sm {
  font-family: var(--um-font-sans);
  font-size: var(--um-text-sm);
  font-weight: var(--um-w-regular);
  line-height: var(--um-lh-normal);
  color: var(--um-fg);
}

.um-caption {
  font-family: var(--um-font-sans);
  font-size: var(--um-text-sm);
  font-weight: var(--um-w-regular);
  line-height: var(--um-lh-normal);
  color: var(--um-fg-muted);
}

.um-mono, code, kbd {
  font-family: var(--um-font-mono);
  font-size: 0.92em;
  font-feature-settings: "ss02", "cv01";
}

.um-tech {
  font-family: var(--um-font-tech);
  font-weight: var(--um-w-medium);
  letter-spacing: var(--um-tracking-wide);
}

/* ============================================================
   THE ULTRA / MODE LOCKUP
   The signature wordmark treatment, à la "iPhone Pro".
   "Ultra" is heavy + tight; "Mode" is regular weight.
   ============================================================ */
.um-lockup {
  font-family: var(--um-font-display);
  letter-spacing: var(--um-tracking-tightest);
  line-height: var(--um-lh-tight);
  white-space: nowrap;
}
.um-lockup .um-ultra-word {
  font-weight: var(--um-w-heavy);
}
.um-lockup .um-mode-word {
  font-weight: var(--um-w-light);
  margin-left: 0.18em;
}

/* ============================================================
   FOCUS — accessible, on-brand
   ============================================================ */
.um-focus, :where(button, a, input, textarea, select):focus-visible {
  outline: 2px solid var(--um-blue);
  outline-offset: 2px;
  border-radius: var(--um-r-sm);
}