/* Apple's dark appearance is the default; the light one below replaces its colors when the root
   carries data-appearance="light" (appearance-early.js sets it before the first paint). */
:root {
  --color-black: #000000;
  --color-clear: transparent;
  --color-white: #ffffff;

  --color-apple-blue: #0a84ff;
  --color-apple-gray: #8e8e93;
  --color-apple-gray-2: #636366;
  --color-apple-gray-5: #2c2c2e;
  --color-apple-gray-6: #1c1c1e;
  --color-apple-blue-light: #007aff;
  --color-apple-gray-light: #6d6d72;
  --color-apple-gray-4-light: #d1d1d6;
  --color-apple-gray-5-light: #e5e5ea;
  --color-apple-gray-6-light: #f2f2f7;

  --color-launcher-background: var(--color-black);
  --color-launcher-surface: var(--color-apple-gray-6);
  --color-launcher-surface-raised: var(--color-apple-gray-5);
  --color-launcher-separator: rgb(84 84 88 / 60%);
  --color-label: var(--color-white);
  --color-label-secondary: rgb(255 255 255 / 85%);
  --color-label-tertiary: rgb(255 255 255 / 72%);
  --color-label-muted: var(--color-apple-gray);
  --color-tint: var(--color-apple-blue);
  --color-focus-ring: var(--color-tint);
  --color-splash: var(--color-launcher-background);

  --color-glass: rgb(255 255 255 / 14%);
  --color-glass-hover: rgb(255 255 255 / 22%);
  --color-glass-edge: rgb(255 255 255 / 22%);
  --color-glass-highlight: rgb(255 255 255 / 30%);
  --color-button-primary: var(--color-white);
  --color-on-button-primary: var(--color-black);
  --color-button-surface: var(--color-apple-gray-6);
  --color-scrim: rgb(0 0 0 / 42%);
  --color-scrim-top: var(--color-scrim);
  --color-scrim-middle: var(--color-scrim);
  --color-scrim-low: var(--color-scrim);
  --color-scrim-floor: var(--color-launcher-background);
  --color-card-blank: var(--color-apple-gray-6);
  --color-card-edge: rgb(255 255 255 / 16%);
  --color-card-ring: var(--color-tint);
  --color-card-monogram-top: var(--color-apple-gray);
  --color-card-monogram-bottom: var(--color-apple-gray-2);
  --color-dot: rgb(255 255 255 / 40%);
  --color-dot-active: var(--color-white);
  --color-on-art: var(--color-label);
  --color-on-art-secondary: var(--color-label-secondary);
  --text-shadow-on-art: none;
  --color-segment-track: rgb(118 118 128 / 24%);
  --color-segment-thumb: var(--color-apple-gray-2);
  --color-segment-separator: rgb(142 142 147 / 35%);
  --color-sheet: var(--color-apple-gray-6);
  --color-sheet-backdrop: rgb(0 0 0 / 55%);
  --color-chip: var(--color-apple-gray-5);
  --color-soon-top: var(--color-apple-gray-5);
  --color-soon-bottom: var(--color-black);
  --color-soon-glyph: rgb(255 255 255 / 70%);
  --color-soon-label: rgb(255 255 255 / 88%);
  --color-soon-sheen: rgb(255 255 255 / 9%);
  --color-soon-glow: rgb(255 255 255 / 7%);
  --color-material: rgb(30 30 32 / 78%);
  --color-material-edge: rgb(255 255 255 / 12%);
  --color-fill-quiet: rgb(118 118 128 / 24%);
  --color-field: var(--color-fill-quiet);
  --color-error: var(--color-apple-red);

  --color-apple-pink: #ff375f;
  --color-apple-red: #ff453a;
  --color-apple-orange: #ff9f0a;
  --color-apple-green: #30d158;
  --color-apple-mint: #00c7be;
  --color-apple-teal: #40c8e0;
  --color-apple-cyan: #64d2ff;
  --color-apple-indigo: #5e5ce6;
  --color-apple-purple: #bf5af2;
  --color-apple-pink-light: #ff2d55;
  --color-apple-red-light: #ff3b30;
  --color-heart: var(--color-apple-pink);
  --color-heart-badge-top: var(--color-apple-orange);
  --color-heart-badge-bottom: var(--color-apple-pink);
  --color-supporters-glow: rgb(255 55 95 / 20%);
  --color-medal-gold-top: #ffe17a;
  --color-medal-gold-bottom: #d9a30f;
  --color-medal-silver-top: #f2f2f7;
  --color-medal-silver-bottom: #a3a3ab;
  --color-medal-bronze-top: #f2b682;
  --color-medal-bronze-bottom: #b36b36;
  --color-on-medal: rgb(0 0 0 / 78%);
  --color-tier-bronze-top: var(--color-medal-bronze-top);
  --color-tier-bronze-bottom: var(--color-medal-bronze-bottom);
  --color-tier-silver-top: var(--color-medal-silver-top);
  --color-tier-silver-bottom: var(--color-medal-silver-bottom);
  --color-tier-gold-top: var(--color-medal-gold-top);
  --color-tier-gold-bottom: var(--color-medal-gold-bottom);
  --color-tier-diamond-top: #d8f8ff;
  --color-tier-diamond-bottom: #3d8bff;
  --color-tier-facet: rgb(255 255 255 / 42%);
  --color-tier-shade: rgb(0 0 0 / 14%);
  --color-tier-sparkle: rgb(255 255 255 / 90%);
  --color-confetti-1: var(--color-apple-pink);
  --color-confetti-2: var(--color-apple-orange);
  --color-confetti-3: var(--color-medal-gold-top);
  --color-confetti-4: var(--color-apple-green);
  --color-confetti-5: var(--color-apple-cyan);
  --color-confetti-6: var(--color-apple-purple);
  --color-podium-glow: rgb(255 214 10 / 14%);
  --color-on-avatar: var(--color-white);
  --color-avatar-0-top: var(--color-apple-gray);
  --color-avatar-0-bottom: var(--color-apple-gray-2);
  --color-avatar-1-top: var(--color-apple-teal);
  --color-avatar-1-bottom: var(--color-apple-blue);
  --color-avatar-2-top: var(--color-apple-purple);
  --color-avatar-2-bottom: var(--color-apple-indigo);
  --color-avatar-3-top: var(--color-apple-orange);
  --color-avatar-3-bottom: var(--color-apple-red);
  --color-avatar-4-top: var(--color-apple-green);
  --color-avatar-4-bottom: var(--color-apple-mint);
  --color-avatar-5-top: var(--color-apple-pink);
  --color-avatar-5-bottom: var(--color-apple-purple);
  --color-avatar-6-top: var(--color-apple-cyan);
  --color-avatar-6-bottom: var(--color-apple-indigo);
  --color-maker-top: var(--color-apple-orange);
  --color-maker-bottom: var(--color-apple-pink);
  --color-halo-1: var(--color-apple-orange);
  --color-halo-2: var(--color-apple-pink);
  --color-halo-3: var(--color-apple-purple);
  --color-halo-4: var(--color-apple-blue);
  --color-credits-glow: rgb(255 159 10 / 16%);
  --color-on-tile: var(--color-white);
  --color-row-hover: rgb(118 118 128 / 12%);
  --color-brand-github: #24292f;
  --color-brand-coffee: #ffdd00;
  --color-on-brand-coffee: #0d0c22;
  --color-brand-facebook: #0866ff;

  --font-system: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --font-system-apple: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --font-size-display: clamp(2.125rem, 4.4vw, 3.25rem);
  --font-size-apple-title-1: 1.75rem;
  --font-size-apple-title-3: 1.25rem;
  --font-size-apple-body: 1.0625rem;
  --font-size-apple-callout: 1rem;
  --font-size-apple-subheadline: 0.9375rem;
  --font-size-apple-footnote: 0.8125rem;
  --font-size-apple-caption: 0.75rem;
  --font-size-apple-caption-2: 0.6875rem;
  --font-size-segment: 0.875rem;
  --font-size-monogram: 30cqi;
  --font-size-soon: 6.5cqi;
  --font-size-avatar-large: 1.5rem;
  --font-size-maker: 2.75rem;
  --font-size-tile: 0.8125rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --leading-none: 1;
  --leading-display: 1.02;
  --leading-apple-title: 1.2;
  --leading-apple-body: 1.294;
  --leading-apple-subheadline: 1.4;
  --leading-apple-footnote: 1.385;

  --tracking-display: -0.035em;
  --tracking-title: -0.03em;
  --tracking-brand: -0.02em;
  --tracking-tight: -0.01em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-gutter: clamp(1rem, 4vw, 2.5rem);

  --layout-library-max-width: 80rem;
  --layout-spotlight-max-width: 35rem;
  --layout-hero-max-height: 52rem;
  --layout-hero-min-height: 40rem;
  --layout-supporters-max-width: 52rem;
  --layout-credits-max-width: 40rem;
  --layout-cover-max-width: 48rem;

  --size-card: clamp(16.25rem, 30vw, 27.5rem);
  --size-card-gap: clamp(1.625rem, 2.6vw, 2.25rem);
  --size-card-ring-gap: 10px;
  --size-tile-ring-gap: 8px;
  --size-tile-min: 14.375rem;
  --size-glass-button: 2.75rem;
  --size-glass-button-large: 3.25rem;
  --size-carousel-arrow: 3rem;
  --size-pill-button: 3.25rem;
  --size-segment-height: 2.75rem;
  --size-segment-width: 23.75rem;
  --size-segment-width-two: 13rem;
  --size-segment-inset: 3px;
  --size-separator-height: 1.125rem;
  --size-dot: 6px;
  --size-dot-active: 22px;
  --size-icon: 1.125rem;
  --size-icon-large: 1.25rem;
  --size-icon-play: 0.9375rem;
  --size-icon-small: 0.875rem;
  --size-icon-inline: 1.0625em;
  --size-logo: 1.75rem;
  --size-install: 30rem;
  --size-install-icon: 3rem;
  --size-install-button: 2.25rem;
  --size-install-close: 1.75rem;
  --size-install-clearance: 6rem;
  --size-consent: 40rem;
  --size-consent-clearance: 9.5rem;
  --size-soon-glyph: 13cqi;
  --size-spinner: 1.25rem;
  --size-spinner-petal-gap: 44%;
  --size-keycap: 1.375rem;
  --size-sheet: 36rem;
  --size-field: 3rem;
  --size-qr: 20rem;
  --size-tier-gem: 1.25rem;
  --size-tier-gem-small: 0.8rem;
  --size-tier-gem-large: 2.75rem;
  --size-heart-badge: 4.5rem;
  --size-avatar: 2.75rem;
  --size-avatar-medium: 3.5rem;
  --size-avatar-large: 4.5rem;
  --size-medal: 1.75rem;
  --size-maker: 7.5rem;
  --size-maker-small: 1.75rem;
  --size-cover: clamp(18rem, 78vw, 26rem);
  --size-tile-icon: 1.875rem;
  --size-row: 3.75rem;
  --size-stroke-icon: 2.2;
  --size-stroke-bold: 2.6;

  --border-width-hairline: 0.5px;
  --border-width-ring: 3px;

  --radius-sm: 6px;
  --radius-segment: 12px;
  --radius-segment-thumb: 9px;
  --radius-tile: 22px;
  --radius-tile-ring: 30px;
  --radius-card: 28px;
  --radius-card-ring: 38px;
  --radius-sheet: 1.75rem;
  --radius-pill: 999px;
  --radius-banner: 22px;
  --radius-icon-tile: 8px;

  --shadow-card: 0 24px 60px rgb(0 0 0 / 50%);
  --shadow-card-edge: inset 0 0 0 1px var(--color-card-edge);
  --shadow-glass:
    inset 0 0 0 1px var(--color-glass-edge), inset 0 1px 0 var(--color-glass-highlight);
  --shadow-segment-thumb: 0 3px 8px rgb(0 0 0 / 28%);
  --shadow-sheet: 0 30px 80px rgb(0 0 0 / 60%);
  --shadow-banner: 0 12px 36px rgb(0 0 0 / 45%), inset 0 0 0 0.5px var(--color-material-edge);
  --shadow-heart-badge: 0 14px 36px rgb(255 55 95 / 36%);
  --shadow-medal: 0 0 0 3px var(--color-launcher-surface);
  --text-shadow-avatar: 0 1px 2px rgb(0 0 0 / 25%);
  --shadow-maker: 0 0 0 5px var(--color-launcher-background), 0 18px 48px rgb(255 55 95 / 34%);
  --shadow-tile: inset 0 0 0 0.5px rgb(255 255 255 / 16%);
  --shadow-navigation: -12px 0 40px rgb(0 0 0 / 45%);

  --blur-glass: blur(24px) saturate(180%);
  --blur-sheet-backdrop: blur(12px);
  --blur-hero-floor: none;
  --blur-halo: blur(26px) saturate(150%);

  --dim-pressed: 0.85;
  --dim-strength: 1;
  --dim-under: 0.55;
  --dimming-hover-lift: 0.18;
  --scale-pressed: 0.96;
  --scale-tile-hover: 1.03;
  --scale-ken-burns: 1.07;
  --scale-ring-rest: 0.94;
  --scale-heart-pop: 1.28;
  --scale-tile-press: 1.08;
  --scale-enter: 0.82;
  --opacity-halo: 0.6;
  --offset-rise: 12px;
  --offset-card-enter: 2.5rem;
  --offset-banner: 1.5rem;
  --offset-nudge: 3px;
  --offset-under: -30%;
  --scroll-condense-start: calc(var(--size-cover) + 3.5rem);
  --scroll-condense-end: calc(var(--size-cover) + 6rem);

  --duration-fast: 120ms;
  --duration-swap-out: 140ms;
  --duration-press: 180ms;
  --duration-normal: 200ms;
  --duration-dot: 300ms;
  --duration-tile: 300ms;
  --duration-segment: 320ms;
  --duration-fade: 400ms;
  --duration-ring: 450ms;
  --duration-sheet: 450ms;
  --duration-launch: 500ms;
  --duration-rise: 500ms;
  --duration-carousel: 550ms;
  --duration-enter: 700ms;
  --duration-crossfade: 700ms;
  --duration-pulse: 800ms;
  --duration-nudge: 420ms;
  --duration-sheen: 3.6s;
  --duration-confetti: 2800ms;
  --duration-loading-delay: 400ms;
  --duration-ken-burns: 26s;
  --duration-stagger: 60ms;
  --duration-install-delay: 1.2s;
  --duration-halo: 14s;
  --duration-navigation: 500ms;

  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
  --easing-segment: cubic-bezier(0.3, 0.8, 0.2, 1);
  --easing-launch: cubic-bezier(0.32, 0.72, 0, 1);
  --easing-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-navigation: var(--easing-launch);
  --easing-gentle: ease-in-out;
  --easing-step-8: steps(8);

  --layer-backdrop: 0;
  --layer-content: 1;
  --layer-arrows: 30;
  --layer-bar: 40;
  --layer-install: 100;
  --layer-launch: 200;
}

/* Apple's light appearance. The painting behind the cards is left untouched down past the cards and
   frosts toward the bottom, where a whiter wash lets the title and buttons read; side cards dim less,
   since dark cards look heavy on white. */
:root[data-appearance='light'] {
  --color-launcher-background: var(--color-white);
  --color-launcher-surface: var(--color-apple-gray-6-light);
  --color-launcher-surface-raised: var(--color-white);
  --color-launcher-separator: rgb(60 60 67 / 29%);
  --color-label: var(--color-black);
  --color-label-secondary: rgb(0 0 0 / 82%);
  --color-label-tertiary: rgb(0 0 0 / 66%);
  --color-label-muted: var(--color-apple-gray-light);
  --color-tint: var(--color-apple-blue-light);

  --color-glass: rgb(255 255 255 / 58%);
  --color-glass-hover: rgb(255 255 255 / 76%);
  --color-glass-edge: rgb(0 0 0 / 8%);
  --color-glass-highlight: rgb(255 255 255 / 80%);
  --color-button-primary: var(--color-black);
  --color-on-button-primary: var(--color-white);
  --color-button-surface: var(--color-apple-gray-6-light);
  --color-scrim-top: var(--color-clear);
  --color-scrim-middle: var(--color-clear);
  --color-scrim-low: rgb(255 255 255 / 62%);
  --color-card-blank: var(--color-apple-gray-5-light);
  --color-card-edge: rgb(0 0 0 / 8%);
  --color-card-monogram-top: var(--color-apple-gray-4-light);
  --color-card-monogram-bottom: var(--color-apple-gray);
  --color-dot: rgb(0 0 0 / 22%);
  --color-dot-active: var(--color-black);
  --color-segment-track: rgb(118 118 128 / 12%);
  --color-segment-thumb: var(--color-white);
  --color-segment-separator: rgb(60 60 67 / 22%);
  --color-sheet: var(--color-white);
  --color-sheet-backdrop: rgb(0 0 0 / 28%);
  --color-chip: var(--color-apple-gray-6-light);
  --color-soon-top: var(--color-apple-gray-6-light);
  --color-soon-bottom: var(--color-apple-gray-4-light);
  --color-soon-glyph: rgb(0 0 0 / 32%);
  --color-soon-label: rgb(0 0 0 / 62%);
  --color-soon-sheen: rgb(255 255 255 / 70%);
  --color-soon-glow: rgb(0 0 0 / 5%);
  --color-material: rgb(255 255 255 / 80%);
  --color-material-edge: rgb(0 0 0 / 6%);
  --color-fill-quiet: rgb(118 118 128 / 12%);
  --color-error: var(--color-apple-red-light);
  --color-heart: var(--color-apple-pink-light);
  --color-heart-badge-bottom: var(--color-apple-pink-light);
  --color-supporters-glow: rgb(255 45 85 / 12%);
  --color-podium-glow: rgb(255 204 0 / 16%);
  --color-credits-glow: rgb(255 149 0 / 14%);
  --color-row-hover: rgb(118 118 128 / 7%);

  --shadow-card: 0 18px 44px rgb(0 0 0 / 22%);
  /* White glass on a white teaser backdrop showed only its label, so the pill fell away before its
     text and came back late as the painting faded in behind it; a soft shadow keeps its shape. */
  --shadow-glass:
    inset 0 0 0 1px var(--color-glass-edge), inset 0 1px 0 var(--color-glass-highlight),
    0 2px 10px rgb(0 0 0 / 10%);
  --shadow-segment-thumb: 0 3px 8px rgb(0 0 0 / 12%), 0 0 0 0.5px rgb(0 0 0 / 4%);
  --shadow-sheet: 0 24px 64px rgb(0 0 0 / 22%);
  --shadow-banner: 0 10px 30px rgb(0 0 0 / 14%), inset 0 0 0 0.5px var(--color-material-edge);
  --shadow-heart-badge: 0 12px 28px rgb(255 45 85 / 28%);
  --shadow-maker: 0 0 0 5px var(--color-launcher-background), 0 14px 36px rgb(255 45 85 / 26%);
  --shadow-tile: inset 0 0 0 0.5px rgb(0 0 0 / 6%);
  --shadow-navigation: -8px 0 32px rgb(0 0 0 / 16%);

  --dim-strength: 0.4;
  --dim-under: 0.88;
  --opacity-halo: 0.45;
  --blur-hero-floor: blur(14px) saturate(140%);
}

/* Over the bare painting, the light appearance writes the top bar and the prompt in white with a soft
   shadow, like type over a photo; over a teaser's plain backdrop they stay dark. */
:root[data-appearance='light'] .hero[data-backdrop='art'] {
  --color-on-art: var(--color-white);
  --color-on-art-secondary: rgb(255 255 255 / 94%);
  --color-dot: rgb(255 255 255 / 55%);
  --color-dot-active: var(--color-white);
  --text-shadow-on-art: 0 1px 3px rgb(0 0 0 / 45%);
}