@font-face {
    font-family: "Advercase";
    src: url("../fonts/AdvercaseFont-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Advercase";
    src: url("../fonts/AdvercaseFont-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Sticky site-header is a fixed pixel height — it hovers over the
       page once the user scrolls past the splash. The splash itself
       occupies a full 100vh independently. */
    --header-height: 80px;

    /* Typography — San Francisco system stack */
    --font-sans:
        -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-display:
        "Advercase", -apple-system, BlinkMacSystemFont, "SF Pro Display",
        "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-serif:
        "New York", ui-serif, "Iowan Old Style", "Apple Garamond", Georgia,
        serif;
    --font-mono:
        ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", "Roboto Mono",
        Consolas, monospace;

    /* Type scale — Apple HIG-inspired */
    --text-caption-2: 0.6875rem; /* 11px */
    --text-caption-1: 0.75rem; /* 12px */
    --text-footnote: 0.8125rem; /* 13px */
    --text-subhead: 0.9375rem; /* 15px */
    --text-callout: 1rem; /* 16px */
    --text-body: 1.0625rem; /* 17px */
    --text-headline: 1.0625rem; /* 17px, semibold */
    --text-title-3: 1.25rem; /* 20px */
    --text-title-2: 1.375rem; /* 22px */
    --text-title-1: 1.75rem; /* 28px */
    --text-large-title: 2.125rem; /* 34px */
    --text-display: 3rem; /* 48px */

    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    --tracking-tight: -0.022em;
    --tracking-normal: -0.011em;
    --tracking-wide: 0.01em;

    /* Weights */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Apple system colors — light */
    --color-system-red: #ff3b30;
    --color-system-orange: #ff9500;
    --color-system-yellow: #ffcc00;
    --color-system-green: #34c759;
    --color-system-mint: #00c7be;
    --color-system-teal: #30b0c7;
    --color-system-cyan: #32ade6;
    --color-system-blue: #007aff;
    --color-system-indigo: #5856d6;
    --color-system-purple: #af52de;
    --color-system-pink: #ff2d55;
    --color-system-brown: #a2845e;

    /* Grays — light */
    --color-gray-1: #8e8e93;
    --color-gray-2: #aeaeb2;
    --color-gray-3: #c7c7cc;
    --color-gray-4: #d1d1d6;
    --color-gray-5: #e5e5ea;
    --color-gray-6: #f2f2f7;

    /* Surfaces & text — light */
    --color-bg: #ffffff;
    --color-bg-elevated: #ffffff;
    --color-bg-grouped: #f2f2f7;
    --color-bg-grouped-elevated: #ffffff;
    --color-bg-translucent: rgba(255, 255, 255, 0.72);

    --color-text-primary: rgba(0, 0, 0, 0.85);
    --color-text-secondary: rgba(60, 60, 67, 0.6);
    --color-text-tertiary: rgba(60, 60, 67, 0.3);
    --color-text-quaternary: rgba(60, 60, 67, 0.18);

    --color-separator: rgba(60, 60, 67, 0.29);
    --color-separator-light: rgba(60, 60, 67, 0.1);
    --color-separator-opaque: #c6c6c8;

    --scrollbar-thumb: rgb(0 0 0 / 0.18);
    --scrollbar-thumb-hover: rgb(0 0 0 / 0.28);
    --scrollbar-thumb-light: rgb(255 255 255 / 0.5);
    --scrollbar-thumb-light-hover: rgb(255 255 255 / 0.68);

    --material-frosted-bg: linear-gradient(
        180deg,
        rgb(255 255 255 / 0.82) 0%,
        rgb(255 255 255 / 0.76) 100%
    );
    --material-frosted-border: 1px solid rgb(255 255 255 / 0.55);
    --material-frosted-backdrop: blur(40px) saturate(1.4) brightness(1.06);

    --material-frosted-thin-bg: linear-gradient(
        180deg,
        rgb(255 255 255 / 0.48) 0%,
        rgb(255 255 255 / 0.3) 100%
    );
    --material-frosted-thin-border: 1px solid rgb(255 255 255 / 0.35);
    --material-frosted-thin-backdrop: blur(20px) saturate(2) brightness(1.04);

    --color-fill-primary: rgba(120, 120, 128, 0.2);
    --color-fill-secondary: rgba(120, 120, 128, 0.16);
    --color-fill-tertiary: rgba(118, 118, 128, 0.12);
    --color-fill-quaternary: rgba(116, 116, 128, 0.08);

    --color-link: var(--color-system-blue);
    --color-accent: var(--color-system-blue);
    --color-focus-ring: rgba(0, 122, 255, 0.5);

    /* Subtle tints — for marketing surfaces (cards, panels, sections) */
    --color-tint-red: #f5f1f1;
    --color-tint-orange: #f7f3ee;
    --color-tint-yellow: #f5f5f1;
    --color-tint-green: #f1f5f3;
    --color-tint-mint: #f1f5f4;
    --color-tint-blue: #f1f3f5;
    --color-tint-purple: #f5f1f4;
    --color-tint-pink: #f5f1f3;

    /* Spacing — 4px base, mac-app density */
    --space-px: 1px;
    --space-0-5: 0.125rem; /* 2 */
    --space-1: 0.25rem; /* 4 */
    --space-1-5: 0.375rem; /* 6 */
    --space-2: 0.5rem; /* 8 */
    --space-3: 0.75rem; /* 12 */
    --space-4: 1rem; /* 16 */
    --space-5: 1.25rem; /* 20 */
    --space-6: 1.5rem; /* 24 */
    --space-8: 2rem; /* 32 */
    --space-10: 2.5rem; /* 40 */
    --space-12: 3rem; /* 48 */
    --space-16: 4rem; /* 64 */
    --space-20: 5rem; /* 80 */
    --space-24: 6rem; /* 96 */

    /* Radii — squircle-leaning, matches macOS controls */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px; /* buttons, inputs */
    --radius-lg: 10px; /* cards */
    --radius-xl: 14px; /* sheets, panels */
    --radius-2xl: 20px; /* large surfaces */
    --radius-3xl: 28px;
    --radius-full: 9999px;

    /* Shadows — soft, low-spread, Apple-style */
    --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    --shadow-xl:
        0 24px 64px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-window:
        0 22px 70px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
    --shadow-inset-hairline: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);

    /* Vibrancy / materials */
    --blur-thin: 10px;
    --blur-regular: 20px;
    --blur-thick: 40px;
    --saturate-vibrancy: 180%;
    --material-chrome: saturate(var(--saturate-vibrancy))
        blur(var(--blur-regular));

    /* Motion — Apple's standard easing */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;
    --duration-slower: 480ms;

    /* Layout */
    --width-prose: 65ch;
    --width-content: 900px;
    --width-wide: 1040px;
    --width-page: 1280px;

    /* Z-index */
    --z-base: 0;
    --z-raised: 10;
    --z-sticky: 100;
    --z-overlay: 1000;
    --z-modal: 2000;
    --z-toast: 3000;
}

/*@media (prefers-color-scheme: dark) {
  :root {
    --color-system-red: #ff453a;
    --color-system-orange: #ff9f0a;
    --color-system-yellow: #ffd60a;
    --color-system-green: #30d158;
    --color-system-mint: #63e6e2;
    --color-system-teal: #40c8e0;
    --color-system-cyan: #64d2ff;
    --color-system-blue: #0a84ff;
    --color-system-indigo: #5e5ce6;
    --color-system-purple: #bf5af2;
    --color-system-pink: #ff375f;
    --color-system-brown: #ac8e68;

    --color-gray-1: #8e8e93;
    --color-gray-2: #636366;
    --color-gray-3: #48484a;
    --color-gray-4: #3a3a3c;
    --color-gray-5: #2c2c2e;
    --color-gray-6: #1c1c1e;

    --color-bg: #000000;
    --color-bg-elevated: #1c1c1e;
    --color-bg-grouped: #000000;
    --color-bg-grouped-elevated: #1c1c1e;
    --color-bg-translucent: rgba(30, 30, 30, 0.72);

    --color-text-primary: rgba(255, 255, 255, 0.92);
    --color-text-secondary: rgba(235, 235, 245, 0.6);
    --color-text-tertiary: rgba(235, 235, 245, 0.3);
    --color-text-quaternary: rgba(235, 235, 245, 0.16);

    --color-separator: rgba(84, 84, 88, 0.6);
    --color-separator-opaque: #38383a;

    --color-fill-primary: rgba(120, 120, 128, 0.36);
    --color-fill-secondary: rgba(120, 120, 128, 0.32);
    --color-fill-tertiary: rgba(118, 118, 128, 0.24);
    --color-fill-quaternary: rgba(118, 118, 128, 0.18);

    --color-focus-ring: rgba(10, 132, 255, 0.6);

    --color-tint-red: #1f1717;
    --color-tint-orange: #1f1b15;
    --color-tint-yellow: #1d1d15;
    --color-tint-green: #151d18;
    --color-tint-mint: #151d1c;
    --color-tint-blue: #15191f;
    --color-tint-purple: #1c161f;
    --color-tint-pink: #1f161a;

    --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.7);
    --shadow-window: 0 22px 70px rgba(0, 0, 0, 0.7), 0 0 0 0.5px rgba(255, 255, 255, 0.06);
    --shadow-inset-hairline: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  }
}*/