/*
 * GENERATED by scripts/build-chrome.mjs — do not edit.
 *
 * Source: src/chrome-tokens.css (the pinned application theme) plus Geist
 * @font-face rules. Custom-property declarations and font faces only: no
 * element rules that could restyle a host gallery.
 *
 * The chrome's own rules live in assets/chrome/chrome.css, authored by hand.
 */

/* geist-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/files/geist-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* geist-cyrillic-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/files/geist-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* geist-vietnamese-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/files/geist-vietnamese-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* geist-latin-ext-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/files/geist-latin-ext-wght-normal.woff2) format('woff2-variations');
  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;
}

/* geist-latin-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/files/geist-latin-wght-normal.woff2) format('woff2-variations');
  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;
}

/*
 * chrome-tokens.css — the Design Playground's permanent application theme.
 *
 * `.sim-view` is simulation cost and does not belong here: real views are
 * separate documents.
 *
 * The application wears ONE theme, permanently. Not light, not dark, never
 * switching. Theme is a property of the views mounted in the viewer, never of
 * the application around them — so the chrome and the viewer's canvas share a
 * single light-gray tint.
 *
 * The snapshot is required. `--qxa-stage: var(--border)` would look correct
 * on `:root` and then go circular the moment `.qx-app` re-declared `--border`.
 * Values are the Stencil design system's light tokens, restated as oklch.
 *
 * Geist `@font-face` rules are prepended by scripts/build-chrome.mjs so every
 * page depth resolves `/assets/files/…` from the site root.
 */

:root {
  /* --------------------------------------------------------------------- */
  /* The application palette — pinned, permanent, never switching.          */
  /* Snapshotted from the Stencil design system's light :root, names in the comments. */
  /* --------------------------------------------------------------------- */

  --qxa-stage: oklch(0.922 0 0);            /* --border */
  --qxa-panel: oklch(1 0 0);                /* --card / --background */
  --qxa-well: oklch(0.97 0 0);              /* --muted / --secondary */
  --qxa-raise: oklch(0.94 0 0);             /* hover wash, between well and stage */

  --qxa-select: oklch(0.205 0 0);           /* --primary */
  --qxa-on-select: oklch(0.985 0 0);        /* --primary-foreground */
  --qxa-fill: oklch(0.205 0 0);             /* --primary */
  --qxa-fill-hover: oklch(0.145 0 0);       /* --foreground, a step darker */
  --qxa-bezel: oklch(0.145 0 0);            /* --foreground; a device stays dark */

  --qxa-text: oklch(0.145 0 0);             /* --foreground */
  --qxa-text-muted: oklch(0.556 0 0);       /* --muted-foreground */
  --qxa-text-quiet: oklch(0.556 0 0);       /* --muted-foreground */

  /* Lines. A dark alpha reads on the gray stage and on a white panel, which
     a solid --border cannot: --border IS the stage, so a hairline in that
     token vanishes against the canvas. */
  --qxa-line: color-mix(in oklch, oklch(0.145 0 0) 12%, transparent);
  --qxa-line-strong: color-mix(in oklch, oklch(0.145 0 0) 22%, transparent);
  /* Canvas dots are their own mix — darker than a hairline, independent of --qxa-line. */
  --qxa-canvas-dot: color-mix(in oklch, oklch(0.145 0 0) 20%, transparent);
  --qxa-scrim: color-mix(in oklch, oklch(0.145 0 0) 45%, transparent);

  --qxa-shadow: 0 12px 32px color-mix(in oklch, oklch(0.145 0 0) 12%, transparent);
  --qxa-shadow-soft: 0 2px 8px color-mix(in oklch, oklch(0.145 0 0) 8%, transparent);
}

/*
 * Stencil metrics the chrome CSS reads (type, space, radius). Scoped to the
 * chrome's own elements so `--font-sans: Geist` cannot restyle a host gallery
 * that uses the same name for a different face.
 */
.qxc-ham,
.qxc-sidebar,
.qxc-scrim,
.qxc-appbar,
.qxc-gallery-spy,
.qx-app {
  --font-heading: var(--font-sans);
  --font-sans: 'Geist Variable', sans-serif;
  --font-mono: 'Geist Variable', sans-serif;

  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/*
 * The application-theme bridge. `.qx-app` marks an application surface: the
 * sidebar, and the root of every home view. Custom properties substitute
 * where they are declared, so every shadcn semantic name the library reads
 * is re-declared here.
 *
 * There is no dark block on `.qx-app`, and its absence is the design.
 */
.qx-app {
  --background: var(--qxa-stage);
  --foreground: var(--qxa-text);
  --card: var(--qxa-panel);
  --card-foreground: var(--qxa-text);
  --popover: var(--qxa-panel);
  --popover-foreground: var(--qxa-text);

  --primary: var(--qxa-fill);
  --primary-foreground: var(--qxa-on-select);
  --secondary: var(--qxa-well);
  --secondary-foreground: var(--qxa-text);

  --muted: var(--qxa-well);
  --muted-foreground: var(--qxa-text-muted);

  --accent: var(--qxa-raise);
  --accent-foreground: var(--qxa-text);
  --destructive: oklch(0.577 0.245 27.325);

  --border: var(--qxa-line);
  --input: var(--qxa-line-strong);
  --ring: var(--qxa-text);

  --sidebar: var(--qxa-panel);
  --sidebar-foreground: var(--qxa-text);
  --sidebar-primary: var(--qxa-fill);
  --sidebar-primary-foreground: var(--qxa-on-select);
  --sidebar-accent: var(--qxa-raise);
  --sidebar-accent-foreground: var(--qxa-text);
  --sidebar-border: var(--qxa-line);
  --sidebar-ring: var(--qxa-text);
}