/* Design tokens, reset and type scale. */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --track-display: -0.022em;
  --track-body: -0.011em;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --nav-h: 56px;
  --tab-h: 62px;
  --tab-clear: 82px;
  --r-card: 26px;
  --r-hero: 34px;

  /* Liquid Glass. --frost is the user's Clear (0) … Tinted (1) preference. */
  --frost: 0.3;
  --glass-blur: calc(3px + var(--frost) * 26px);
  --glass-sat: 1.35;
  --glass-bright: 1.04;

  /* Motion. Replaced at boot with real spring curves (see util.js). */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring-bouncy: cubic-bezier(0.3, 1.45, 0.45, 1);
  --dur-bouncy: 560ms;
  --spring-smooth: cubic-bezier(0.2, 0.9, 0.25, 1);
  --dur-smooth: 480ms;
  --spring-snappy: cubic-bezier(0.2, 0.9, 0.3, 1);
  --dur-snappy: 320ms;

  --red: #ff383c;
  --orange: #ff8d28;
  --yellow: #ffcc00;
  --green: #34c759;
  --teal: #00c3d0;
  --indigo: #6155f5;
  --purple: #cb30e0;
  --pink: #ff2d55;
}

/* With real lensing available, keep the frost light so the bending stays visible. */
html.lg-refract { --glass-blur: calc(1px + var(--frost) * 14px); }

@supports (font: -apple-system-body) {
  :root { --track-display: 0.011em; --track-body: -0.02em; }
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f2f7;
  --surface: #ffffff;
  --surface-2: #f2f2f7;
  --label: #000000;
  --label-2: rgb(60 60 67 / 0.64);
  --label-3: rgb(60 60 67 / 0.34);
  --sep: rgb(60 60 67 / 0.14);
  --fill: rgb(120 120 128 / 0.12);
  --fill-2: rgb(120 120 128 / 0.2);
  --blue: #0088ff;

  --glass-fill: rgb(255 255 255 / calc(0.05 + var(--frost) * 0.68));
  --glass-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.14) 0%, rgb(255 255 255 / 0) 50%, rgb(255 255 255 / 0.04) 100%);
  --glass-inner: inset 0 0 8px -3px rgb(255 255 255 / 0.5), inset 0 -8px 10px -10px rgb(0 0 0 / 0.12);
  --glass-thick: rgb(250 250 252 / 0.7);
  --glass-edge: rgb(0 0 0 / 0.09);
  --glass-shadow: 0 10px 32px rgb(0 0 0 / 0.13), 0 2px 6px rgb(0 0 0 / 0.07);
  --rim-hi: rgb(255 255 255 / 0.98);
  --rim-mid: rgb(255 255 255 / 0.62);
  --rim-lo: rgb(255 255 255 / 0.24);
  --tab-sel: rgb(0 0 0 / 0.075);
  --sheet-fill: rgb(246 246 250 / 0.9);

  --code-bg: #ffffff;
  --tk-k: #ad3da4;
  --tk-s: #c41a16;
  --tk-n: #1c00cf;
  --tk-c: #6c7986;
  --tk-f: #326d74;
  --tk-b: #6c36a9;
  --tk-p: #2b5c8a;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --label: #ffffff;
  --label-2: rgb(235 235 245 / 0.64);
  --label-3: rgb(235 235 245 / 0.32);
  --sep: rgb(84 84 88 / 0.55);
  --fill: rgb(120 120 128 / 0.24);
  --fill-2: rgb(120 120 128 / 0.36);
  --blue: #0091ff;
  --red: #ff4245;
  --orange: #ff9230;
  --yellow: #ffd600;
  --green: #30d158;
  --teal: #00d2e0;
  --indigo: #7d7aff;
  --purple: #db34f2;
  --pink: #ff375f;

  /* iOS 27: dark glass reads lighter than the content beneath it. */
  --glass-fill: linear-gradient(rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.1)), rgb(46 46 52 / calc(var(--frost) * 0.74));
  --glass-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.07) 0%, rgb(255 255 255 / 0) 50%, rgb(255 255 255 / 0.02) 100%);
  --glass-inner: inset 0 0 8px -3px rgb(255 255 255 / 0.2), inset 0 -8px 10px -10px rgb(0 0 0 / 0.4);
  --glass-thick: rgb(44 44 50 / 0.72);
  --glass-edge: rgb(255 255 255 / 0.1);
  --glass-shadow: 0 12px 36px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.3);
  --glass-bright: 1.12;
  --rim-hi: rgb(255 255 255 / 0.6);
  --rim-mid: rgb(255 255 255 / 0.3);
  --rim-lo: rgb(255 255 255 / 0.1);
  --tab-sel: rgb(0 0 0 / 0.3);
  --sheet-fill: rgb(30 30 34 / 0.92);

  --code-bg: #1c1c1e;
  --tk-k: #ff7ab2;
  --tk-s: #ff8170;
  --tk-n: #d9c97c;
  --tk-c: #7f8c98;
  --tk-f: #78c2b3;
  --tk-b: #b281eb;
  --tk-p: #6bdfff;
}

html[data-accent="blue"] { --accent: var(--blue); }
html[data-accent="indigo"] { --accent: var(--indigo); }
html[data-accent="purple"] { --accent: var(--purple); }
html[data-accent="pink"] { --accent: var(--pink); }
html[data-accent="orange"] { --accent: var(--orange); }
html[data-accent="green"] { --accent: var(--green); }
html[data-accent="teal"] { --accent: var(--teal); }

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: 100%; margin: 0; }

body {
  font: 400 17px/1.3 var(--font);
  letter-spacing: var(--track-body);
  color: var(--label);
  background: var(--bg);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select { font: inherit; letter-spacing: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; }
input, textarea { border: 0; background: none; outline: 0; padding: 0; margin: 0; }
a { color: var(--accent); text-decoration: none; }
h1, h2, h3, h4, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
svg.icon { flex: none; display: block; }
[hidden] { display: none !important; }

:focus { outline: none; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible { outline: none; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }

/* Type scale (iOS text styles). */
.title-1 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: var(--track-display); }
.title-2 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: var(--track-display); }
.title-3 { font-size: 20px; line-height: 25px; font-weight: 600; }
.headline { font-size: 17px; line-height: 22px; font-weight: 600; }
.subhead { font-size: 15px; line-height: 20px; }
.footnote { font-size: 13px; line-height: 18px; color: var(--label-2); }
.muted { color: var(--label-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

html[data-theme="dark"] { --spec-opacity: 0.75; }