@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   Radix Pink
   ========================================================================== */

:root {
    --pink-1: #291d22;
    --pink-2: #311d26;
    --pink-3: #482034;
    --pink-4: #5e193e;
    --pink-5: #6a1f47;
    --pink-6: #7a2b54;
    --pink-7: #923867;
    --pink-8: #b74580;
    --pink-9: #ce0985;
    --pink-10: #be0078;
    --pink-11: #ff88c8;
    --pink-12: #ffcfe5;

    --pink-a1: #ed003b0a;
    --pink-a2: #f8006413;
    --pink-a3: #fe1c8d2d;
    --pink-a4: #fd058a47;
    --pink-a5: #ff1b9554;
    --pink-a6: #fd3a9f67;
    --pink-a7: #ff4fab82;
    --pink-a8: #fe56adad;
    --pink-a9: #ff03a2c7;
    --pink-a10: #fe009bb5;
    --pink-a11: #ff88c8;
    --pink-a12: #ffcfe5;

    --pink-contrast: #fff;
    --pink-surface: #411a2b80;
    --pink-indicator: #ce0985;
    --pink-track: #ce0985;


    /* ======================================================================
       Radix Gray
       ====================================================================== */

    --gray-1: #212121;
    --gray-2: #282828;
    --gray-3: #303030;
    --gray-4: #363636;
    --gray-5: #3c3c3c;
    --gray-6: #444;
    --gray-7: #515151;
    --gray-8: #676767;
    --gray-9: #737373;
    --gray-10: #7f7f7f;
    --gray-11: #b6b6b6;
    --gray-12: #eee;

    --gray-a1: #00000000;
    --gray-a2: #ffffff08;
    --gray-a3: #ffffff11;
    --gray-a4: #ffffff18;
    --gray-a5: #ffffff1f;
    --gray-a6: #ffffff28;
    --gray-a7: #ffffff37;
    --gray-a8: #ffffff50;
    --gray-a9: #ffffff5e;
    --gray-a10: #ffffff6c;
    --gray-a11: #ffffffab;
    --gray-a12: #ffffffeb;

    --gray-contrast: #fff;
    --gray-surface: rgba(0, 0, 0, 0.05);
    --gray-indicator: #737373;
    --gray-track: #737373;


    /* ======================================================================
       Codex semantic tokens
       ====================================================================== */

    --background: var(--gray-1);

    --surface: var(--gray-2);
    --surface-raised: var(--gray-3);
    --surface-hover: var(--gray-4);

    --text: var(--gray-12);
    --text-muted: var(--gray-11);
    --text-subtle: var(--gray-10);

    --border: var(--gray-6);
    --border-subtle: var(--gray-a5);

    --accent: var(--pink-9);
    --accent-hover: var(--pink-10);
    --accent-text: var(--pink-11);
    --accent-soft: var(--pink-a3);

    --code-background: #1a1a1a;

    --font-sans: 'Outfit', sans-serif;

    --content-width: 760px;
    --sidebar-width: 260px;
    --toc-width: 220px;
    --header-height: 64px;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-sm:
        0 2px 8px rgba(0, 0, 0, 0.18);

    --shadow-lg:
        0 20px 60px rgba(0, 0, 0, 0.4);
}


/* ==========================================================================
   P3 colour support
   ========================================================================== */

@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        :root {
            --pink-1: oklch(24.8% 0.0192 351.1);
            --pink-2: oklch(25.9% 0.0345 351.1);
            --pink-3: oklch(30.7% 0.0678 351.1);
            --pink-4: oklch(33.9% 0.108 351.1);
            --pink-5: oklch(37.2% 0.1154 351.1);
            --pink-6: oklch(41.7% 0.1189 351.1);
            --pink-7: oklch(48.1% 0.1322 351.1);
            --pink-8: oklch(56.2% 0.1606 351.1);
            --pink-9: oklch(56.2% 0.2303 351.1);
            --pink-10: oklch(51.7% 0.2303 351.1);
            --pink-11: oklch(79% 0.2101 351.1);
            --pink-12: oklch(90.5% 0.0649 351.1);

            --gray-1: oklch(24.8% 0 none);
            --gray-2: oklch(27.7% 0 none);
            --gray-3: oklch(31.1% 0 none);
            --gray-4: oklch(33.4% 0 none);
            --gray-5: oklch(35.7% 0 none);
            --gray-6: oklch(38.7% 0 none);
            --gray-7: oklch(43.4% 0 none);
            --gray-8: oklch(51.3% 0 none);
            --gray-9: oklch(55.7% 0 none);
            --gray-10: oklch(59.7% 0 none);
            --gray-11: oklch(77.6% 0 none);
            --gray-12: oklch(94.9% 0 none);
        }
    }
}


/* ==========================================================================
   Reset
   ========================================================================== */

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

html {
    background: var(--background);

    color: var(--text);

    font-family: var(--font-sans);

    color-scheme: dark;

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;
}

body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    height: 100vh;
    background: var(--background);
    color: var(--text);

    font-family: inherit;
}

/* CSS */
.brand-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Outfit', sans-serif;
  font-size: 4.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1a1a1a;
}

.text-main {
  color: #ce0985;
}

.key-badge {
  background-color: #ce0985;
  color: #ffffff;
  padding: 0em 0.2em;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.85em;
  text-transform: lowercase;
  box-shadow: 0 2px 4px rgba(206, 9, 133, 0.2);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 780px) {
    .layout {
        grid-template-columns:
            var(--sidebar-width)
            minmax(0, 1fr);
    }

    .layout > .toc {
        display: none;
    }
}

@media (max-width: 900px) {
    .layout {
        grid-template-columns: 1fr;
    }

    .layout > aside:not(.toc) {
        display: none;
    }

    .layout > main {
        padding: 48px 32px 80px;
    }
}

@media (max-width: 700px) {
    .site-header {
        padding: 0 16px;
    }

    .search-trigger {
        width: auto;
    }

    .search-trigger .placeholder {
        display: none;
    }

    .layout > main {
        padding: 36px 20px 64px;
    }

    .document h1 {
        font-size: 2rem;
    }

    .dialog {
        width: calc(100vw - 20px);
    }
}