/* Storyteller documentation theme: design tokens.

   Shipped by the mkdocs-storyteller-docs-theme plugin and loaded before
   theme.css on every Storyteller docs site. This file is the only place a
   colour, size, weight, radius or easing is defined; theme.css and any
   follow-up surface (the login page, the Dokka reference) read from here.

   UNITS: Material sets html{font-size:125%}, so 1rem is 20px at the base
   breakpoint and scales to 22px at 100em and 24px at 125em. Every rem below is
   annotated in px at 20px/rem.

   ORDER: tokens, Material bridge, dark scheme, diagrams, user preferences.
   Dark mode changes colours only; geometry, type and radii are shared. */

/* Code face --------------------------------------------------------------

   Geist Mono, self-hosted (SIL OFL), variable 400-700, Latin and Latin
   Extended only. The system stack in --md-code-font is the fallback. */

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("geist-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Design tokens ---------------------------------------------------------- */

:root {
  /* Surfaces. The page is one continuous canvas; a surface has to earn its
     place by carrying state, grouping or code. */
  --st-bg: #ffffff;
  --st-bg-subtle: #f7f7f8;
  --st-bg-hover: #f1f1f3;

  /* Text. Contrast on --st-bg is 18.9:1, 7.6:1 and 5.0:1. */
  --st-ink: #101014;
  --st-ink-2: #52525b;
  --st-ink-3: #6e6e78;
  --st-code-ink: #171717;

  /* Code surfaces. A block sits on the page colour inside its own hairline;
     inline code is a chip one step off the page. */
  --st-code-bg: #ffffff;
  --st-code-line: #ebebeb;
  --st-code-inline-bg: #f2f2f2;
  --st-code-inline-line: rgb(0 0 0 / 8%);
  --st-code-control-ink: #4d4d4d;

  /* Hairlines. */
  --st-line: #e4e4e7;
  --st-line-strong: #d1d1d6;

  /* The one accent. Derived from #1c62eb in the brand mark and darkened for
     text use: 6.6:1 on --st-bg and 5.9:1 on --st-accent-wash. */
  --st-accent: #1b51d6;
  --st-accent-strong: #143fba;
  --st-accent-wash: #eef2fe;
  --st-focus: #1b51d6;

  /* Official platform marks on the documentation hub. */
  --st-platform-apple: var(--st-ink);
  --st-platform-android: #3ddc84;
  --st-platform-web: #e34f26;
  --st-platform-react: #61dafb;
  --st-platform-flutter: #54c5f8;

  /* Shell geometry. */
  --st-shell: 66rem; /* 1320px */
  --st-gutter: 2rem; /* 40px */
  --st-rail: 14rem; /* 280px */
  --st-toc: 12rem; /* 240px */
  --st-measure: 32rem; /* 640px, about 64 characters at 16px */
  --st-article-pad: 2rem; /* 40px */
  --st-rail-pad: 1.4rem; /* 28px, kept symmetric: see the rail section */
  --st-header-h: 3.2rem; /* 64px */

  /* Type scale. Body is 16px; every other size is a step from it. */
  --st-type-h1: 1.8rem; /* 36px */
  --st-type-hub-title: 2rem; /* 40px */
  --st-type-h2: 1.2rem; /* 24px */
  --st-type-h3: 0.95rem; /* 19px */
  --st-type-h4: 0.8rem; /* 16px */
  --st-type-lede: 0.875rem; /* 17.5px */
  --st-type-body: 0.8rem; /* 16px */
  --st-type-ui: 0.7rem; /* 14px */
  --st-type-small: 0.65rem; /* 13px */
  --st-type-code: 0.65rem; /* 13px */
  --st-type-micro: 0.6rem; /* 12px */

  /* Weights kept to faces the system families actually ship. */
  --st-weight-regular: 400;
  --st-weight-medium: 500;
  --st-weight-heading: 600;

  --st-radius: 0.5rem; /* 10px */
  --st-radius-code: 0.4rem; /* 8px */
  --st-radius-sm: 0.3rem; /* 6px */
  --st-radius-pill: 1.2rem;
  --st-radius-round: 50%; /* Circular Story thumbnails. */
  --st-ease: cubic-bezier(0.2, 0, 0, 1);
  --st-duration: 150ms;

  /* Translucent edges and the text selection. The alphas are tuned against
     the light page and left alone under the dark scheme. */
  --st-selection: #cfdcfb;
  --st-link-underline: rgb(27 81 214 / 30%);
  --st-image-edge: rgb(0 0 0 / 10%);

  /* Icons drawn through mask-image, so they take currentColor. */
  --st-icon-copy: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M5.5 3.5A1.5 1.5 0 0 1 7 2h5.5A1.5 1.5 0 0 1 14 3.5V9a1.5 1.5 0 0 1-1.5 1.5H7A1.5 1.5 0 0 1 5.5 9V3.5Z" fill="none" stroke="black" stroke-width="1.5"/><path d="M10.5 10.5V12.5A1.5 1.5 0 0 1 9 14H3.5A1.5 1.5 0 0 1 2 12.5V7A1.5 1.5 0 0 1 3.5 5.5h2" fill="none" stroke="black" stroke-width="1.5"/></svg>');
  --st-icon-check: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13.5 4.5 6 12 2.5 8.5" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

/* Material variable bridge -----------------------------------------------

   The header is page-coloured, so --md-primary-fg-color becomes the page
   surface and --md-primary-bg-color becomes page ink. Material derives the
   header background, the header foreground, the search placeholder and the
   search icon from that pair. --md-typeset-a-color also defaults to
   --md-primary-fg-color, so it has to be restated or every link turns white. */

/* Material declares its own light values on both :root and the body's
   [data-md-color-scheme=default], and the body copy outranks a :root bridge
   for everything the page contains; the bridge is declared on both too. */
:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--st-bg);
  --md-primary-fg-color--light: var(--st-bg-subtle);
  --md-primary-fg-color--dark: var(--st-bg-hover);
  --md-primary-bg-color: var(--st-ink);
  --md-primary-bg-color--light: var(--st-ink-3);

  --md-accent-fg-color: var(--st-accent-strong);
  --md-accent-fg-color--transparent: var(--st-accent-wash);
  --md-accent-bg-color: var(--st-bg);

  --md-typeset-a-color: var(--st-accent);
  --md-typeset-mark-color: #fdf2c4;
  --md-typeset-table-color: var(--st-line);

  --md-default-bg-color: var(--st-bg);
  --md-default-fg-color: var(--st-ink);
  --md-default-fg-color--light: var(--st-ink-2);
  --md-default-fg-color--lighter: var(--st-ink-3);
  --md-default-fg-color--lightest: var(--st-line);
  --md-default-bg-color--light: rgb(255 255 255 / 70%);
  --md-default-bg-color--lighter: rgb(255 255 255 / 30%);
  --md-default-bg-color--lightest: rgb(255 255 255 / 12%);
  --md-code-bg-color--light: var(--st-code-bg);
  --md-code-bg-color--lighter: var(--st-code-bg);
  --md-typeset-color: var(--st-ink);
  --md-typeset-kbd-color: var(--st-bg-subtle);
  --md-typeset-kbd-accent-color: var(--st-ink);
  --md-typeset-kbd-border-color: var(--st-line-strong);
  --md-typeset-table-color--light: var(--st-line);
  --md-admonition-fg-color: var(--st-ink);
  --md-admonition-bg-color: var(--st-bg);

  --md-footer-bg-color: var(--st-bg);
  --md-footer-bg-color--dark: var(--st-bg-subtle);
  --md-footer-fg-color: var(--st-ink);
  --md-footer-fg-color--light: var(--st-ink-2);
  --md-footer-fg-color--lighter: var(--st-ink-3);

  /* Elevation for the two floating surfaces only: search results and the
     back-to-top control. Everything structural uses a hairline. */
  --md-shadow-z1: 0 1px 2px rgb(16 16 20 / 6%);
  --md-shadow-z2: 0 4px 12px rgb(16 16 20 / 8%), 0 1px 2px rgb(16 16 20 / 6%);
  --md-shadow-z3: 0 12px 32px rgb(16 16 20 / 12%), 0 1px 2px rgb(16 16 20 / 6%);

  --md-text-font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --md-code-font: "Geist Mono", ui-monospace, "SFMono-Regular", "SF Mono",
    Menlo, Consolas, "Liberation Mono", monospace;

  --md-code-bg-color: var(--st-code-bg);
  --md-code-fg-color: var(--st-code-ink);
  --md-clipboard-icon: var(--st-icon-copy);

  /* Syntax palette: four hues on the text colour, the way Vercel's docs
     colour code. Keywords, strings, constants and functions carry colour;
     names, operators and punctuation stay text ink; comments are grey.
     Measured on --st-code-bg: 5.4:1 keyword, 5.0:1 string, 4.6:1 constant,
     7.2:1 function, 5.7:1 comment. */
  --md-code-hl-color: var(--st-accent);
  --md-code-hl-color--light: var(--st-accent-wash);
  --md-code-hl-keyword-color: #c41562;
  --md-code-hl-string-color: #107d32;
  --md-code-hl-number-color: #005ff2;
  --md-code-hl-constant-color: #005ff2;
  --md-code-hl-function-color: #7d00cc;
  --md-code-hl-special-color: #7d00cc;
  --md-code-hl-name-color: var(--st-code-ink);
  --md-code-hl-variable-color: var(--st-code-ink);
  --md-code-hl-operator-color: var(--st-code-ink);
  --md-code-hl-punctuation-color: var(--st-code-ink);
  --md-code-hl-comment-color: #666666;
  --md-code-hl-generic-color: var(--st-ink-2);

  /* Public API of the storyteller-ai-buttons plugin stylesheet. Setting these
     turns the shipped filled button into a neutral control without fighting
     the plugin on specificity. */
  --st-ai-button-bg: var(--st-bg);
  --st-ai-button-hover: var(--st-bg-subtle);
  --st-ai-button-text: var(--st-ink);
  --st-ai-toast-bg: var(--st-ink);
  --st-ai-toast-text: var(--st-bg);
  --st-ai-toast-error-bg: #9f1239;
}

/* Dark mode keeps the same hierarchy and geometry. Only semantic colours and
   the wordmark asset change. */
[data-md-color-scheme="slate"] {
  --st-bg: #000000;
  --st-bg-subtle: #0a0a0a;
  --st-bg-hover: #171717;

  --st-ink: #ededed;
  --st-ink-2: #a1a1a1;
  --st-ink-3: #888888;
  --st-code-ink: #ededed;
  --st-code-bg: #0a0a0a;
  --st-code-line: #2e2e2e;
  --st-code-inline-bg: #1a1a1a;
  --st-code-inline-line: rgb(255 255 255 / 14%);
  --st-code-control-ink: #a1a1a1;

  --st-line: #1f1f1f;
  --st-line-strong: #333333;

  --st-accent: #8ab4ff;
  --st-accent-strong: #a8c7ff;
  --st-accent-wash: #1d2a45;
  --st-focus: #b6b6bd;
  --st-platform-apple: var(--st-ink);

  --md-typeset-mark-color: #4a3f1d;
  --md-code-hl-color: #8ab4ff;
  --md-code-hl-color--light: #1d2a45;
  --md-code-hl-keyword-color: #ff4d8d;
  --md-code-hl-string-color: #00ca50;
  --md-code-hl-number-color: #47a8ff;
  --md-code-hl-constant-color: #47a8ff;
  --md-code-hl-function-color: #c472fb;
  --md-code-hl-special-color: #c472fb;
  --md-code-hl-name-color: var(--st-code-ink);
  --md-code-hl-variable-color: var(--st-code-ink);
  --md-code-hl-operator-color: var(--st-code-ink);
  --md-code-hl-punctuation-color: var(--st-code-ink);
  --md-code-hl-comment-color: #a1a1a1;
  --md-code-hl-generic-color: var(--st-ink-2);

  --md-shadow-z1: 0 1px 2px rgb(0 0 0 / 28%);
  --md-shadow-z2: 0 4px 12px rgb(0 0 0 / 35%), 0 1px 2px rgb(0 0 0 / 28%);
  --md-shadow-z3: 0 12px 32px rgb(0 0 0 / 45%), 0 1px 2px rgb(0 0 0 / 28%);

  /* Material's slate palette declares these on the body, where they outrank
     the :root bridge for everything the page contains. Restated here so no
     Material-painted surface (the drawer list, search, admonitions, tables,
     kbd) falls back to Material's slate grey. */
  --md-primary-fg-color: var(--st-bg);
  --md-primary-fg-color--light: var(--st-bg-subtle);
  --md-primary-fg-color--dark: var(--st-bg-hover);
  --md-primary-bg-color: var(--st-ink);
  --md-primary-bg-color--light: var(--st-ink-3);
  --md-accent-fg-color: var(--st-accent-strong);
  --md-accent-fg-color--transparent: var(--st-accent-wash);
  --md-accent-bg-color: var(--st-bg);
  --md-default-fg-color: var(--st-ink);
  --md-default-fg-color--light: var(--st-ink-2);
  --md-default-fg-color--lighter: var(--st-ink-3);
  --md-default-fg-color--lightest: var(--st-line);
  --md-default-bg-color: var(--st-bg);
  --md-default-bg-color--light: rgb(0 0 0 / 70%);
  --md-default-bg-color--lighter: rgb(0 0 0 / 30%);
  --md-default-bg-color--lightest: rgb(0 0 0 / 12%);
  --md-code-fg-color: var(--st-code-ink);
  --md-code-bg-color: var(--st-code-bg);
  --md-code-bg-color--light: var(--st-code-bg);
  --md-code-bg-color--lighter: var(--st-code-bg);
  --md-typeset-color: var(--st-ink);
  --md-typeset-a-color: var(--st-accent);
  --md-typeset-kbd-color: var(--st-bg-subtle);
  --md-typeset-kbd-accent-color: var(--st-ink);
  --md-typeset-kbd-border-color: var(--st-line-strong);
  --md-typeset-table-color: var(--st-line);
  --md-typeset-table-color--light: var(--st-line);
  --md-admonition-fg-color: var(--st-ink);
  --md-admonition-bg-color: var(--st-bg);
  --md-footer-bg-color: var(--st-bg);
  --md-footer-bg-color--dark: var(--st-bg-subtle);
  --md-footer-fg-color: var(--st-ink);
  --md-footer-fg-color--light: var(--st-ink-2);
  --md-footer-fg-color--lighter: var(--st-ink-3);

  --st-ai-toast-bg: #f4f4f5;
  --st-ai-toast-text: #000000;

  /* The palette is `custom`, so Material defines no dark values for these;
     restated here so they resolve against the dark tokens above. */
  --md-primary-fg-color: var(--st-bg);
  --md-primary-fg-color--light: var(--st-bg-subtle);
  --md-primary-fg-color--dark: var(--st-bg-hover);
  --md-primary-bg-color: var(--st-ink);
  --md-primary-bg-color--light: var(--st-ink-3);
  --md-accent-fg-color: var(--st-accent-strong);
  --md-accent-fg-color--transparent: var(--st-accent-wash);
  --md-accent-bg-color: var(--st-bg);
}

/* Diagrams ---------------------------------------------------------------

   Material renders Mermaid inside a closed shadow root and colours it from
   these variables, so they are the only way in. A custom property resolves
   where it is declared, and Material declares its defaults on :root, where
   only the light tokens are visible; declaring this block on the body under
   the dark scheme as well makes every var() below resolve per scheme. */

:root,
[data-md-color-scheme="slate"] {
  --md-mermaid-edge-color: var(--st-ink-3);
  --md-mermaid-node-bg-color: var(--st-bg-subtle);
  --md-mermaid-node-fg-color: var(--st-ink-3);
  --md-mermaid-label-bg-color: var(--st-bg);
  --md-mermaid-label-fg-color: var(--st-ink);
  --md-mermaid-sequence-actor-bg-color: var(--md-mermaid-label-bg-color);
  --md-mermaid-sequence-actor-border-color: var(--md-mermaid-node-fg-color);
  --md-mermaid-sequence-actor-fg-color: var(--md-mermaid-label-fg-color);
  --md-mermaid-sequence-actor-line-color: var(--st-line-strong);
  --md-mermaid-sequence-actorman-bg-color: var(--md-mermaid-label-bg-color);
  --md-mermaid-sequence-actorman-line-color: var(--md-mermaid-node-fg-color);
  --md-mermaid-sequence-box-bg-color: var(--md-mermaid-node-bg-color);
  --md-mermaid-sequence-box-fg-color: var(--md-mermaid-edge-color);
  --md-mermaid-sequence-label-bg-color: var(--md-mermaid-node-bg-color);
  --md-mermaid-sequence-label-fg-color: var(--md-mermaid-label-fg-color);
  --md-mermaid-sequence-loop-bg-color: var(--md-mermaid-node-bg-color);
  --md-mermaid-sequence-loop-border-color: var(--md-mermaid-node-fg-color);
  --md-mermaid-sequence-loop-fg-color: var(--md-mermaid-edge-color);
  --md-mermaid-sequence-message-fg-color: var(--md-mermaid-edge-color);
  --md-mermaid-sequence-message-line-color: var(--md-mermaid-edge-color);
  --md-mermaid-sequence-note-bg-color: var(--md-mermaid-label-bg-color);
  --md-mermaid-sequence-note-border-color: var(--md-mermaid-label-fg-color);
  --md-mermaid-sequence-note-fg-color: var(--md-mermaid-edge-color);
  --md-mermaid-sequence-number-bg-color: var(--md-mermaid-node-fg-color);
  --md-mermaid-sequence-number-fg-color: var(--st-bg);
}

/* User preferences ------------------------------------------------------- */

/* Higher contrast: darker hairlines and secondary ink, the strong accent for
   text. theme.css widens the borders that carry structure. */
@media (prefers-contrast: more) {
  :root {
    --st-line: #a1a1aa;
    --st-line-strong: #52525b;
    --st-accent: #143fba;
    --st-ink-2: #3f3f46;
    --st-ink-3: #52525b;
  }
}