/* Sagan Docs design tokens, shared by the Genie documentation (VitePress) and the
   Sagan Docs hub (hub/, served at /docs/ and copied to /docs/_sagan/brand.css at
   build time).
   The palette, fonts and type scale follow the Genie app
   (frontend/src/assets/theme/genie-tokens.css and theme.css): the platform UI font,
   a near-white ground in light and black in dark, neutral greys, and the indigo
   accent kept for links, primary buttons and the logo. Selection and hover are
   neutral, as in the app. The tertiary text grey is a step darker than the app's so
   small captions pass 4.5:1.
   Theme switch: the `dark` class on <html> (the VitePress convention; the hub uses
   the same class and the same storage key, and both follow the site_theme cookie
   shared with sagan.vn and Genie: shared/site-prefs.js).
   Sizes are in rem (16px = 1rem; hairlines, shadows and breakpoints stay in px). */
:root {
  color-scheme: light;
  /* The app's stacks: the platform UI font (SF Pro, Segoe UI…), which renders Vietnamese well. */
  --g-font: ui-sans-serif, -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';
  --g-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  /* The Genie wordmark only, as GenieLockup.vue. */
  --g-wordmark: 'Outfit', var(--g-font);
  /* The Sagan wordmark, as on sagan.vn. */
  --s-brand-font: 'Be Vietnam Pro', var(--g-font);

  --g-r: .5rem;
  --g-rs: .375rem;
  --g-rl: .625rem;
  --g-r-row: .5rem;
  --g-r-card: 1rem;
  --g-r-modal: 1rem;
  --g-r-pill: 999px;
  --g-motion: 160ms ease;

  /* Text scale */
  --g-text-xs: .6875rem;
  --g-text-sm: .75rem;
  --g-text-md: .8125rem;
  --g-text-base: .875rem;
  --g-text-lg: .9375rem;
  --g-text-xl: 1rem;
  --g-text-2xl: 1.125rem;
  --g-text-3xl: 1.25rem;
  --g-text-4xl: 1.625rem;
  --g-text-display: 2.5rem;

  /* Grounds and lines */
  --g-bg: #FCFCFC;
  --g-raised: #FFFFFF;
  --g-sunk: #F7F7F7;
  --g-chip: #F0F0F0;
  --g-band: #F3F3F3;
  --g-border: #E5E5E5;
  --g-border-strong: #D9D9D9;
  --g-divider: #EDEDED;
  --g-slash: #D0D0D0;
  --g-seg-on: #FFFFFF;
  --g-bubble: #F2F2F2;
  --g-code-bg: #F3F3F3;
  --g-inline-code-bg: #F0F0F0;
  --g-hover: rgba(0, 0, 0, .05);

  /* Text */
  --g-fg: #0D0D0D;
  --g-ink2: #333333;
  --g-fg2: #5D5D5D;
  --g-fg3: #6E6E6E;
  --g-icon: #8F8F8F;

  /* Genie accent */
  --g-accent: #5857B9;
  --g-accent-hover: #4B48A8;
  --g-accent-text: #4E4BAC;
  --g-accent-soft: #EEEEFF;
  --g-accent-line: #E0DEF7;
  --g-accent-fg: #FFFFFF;
  --g-cite: #EEEEFF;
  --g-mark: #E4E1FF;

  /* Inverse buttons */
  --g-inv: #0D0D0D;
  --g-inv-fg: #FFFFFF;

  /* Sagan mark: the star and the back of the orbit ring (sagan.vn's palette) */
  --s-mark-star: #7C6CF2;
  --s-mark-orbit: .7;

  /* Data Platform (coming soon) */
  --g-teal: #0B5E66;
  --g-teal-soft: #E3F2F3;
  --g-teal-line: #CDE6E8;

  /* States */
  --g-ok-text: #0B6B4E;
  --g-warn-text: #7A4E00;
  --g-warn-soft: #FFF6E5;
  --g-warn-line: #F1DDB0;
  --g-err-text: #9B1C1C;
  --g-err-soft: #FDECEC;
  --g-err-line: #F5CFCF;

  /* Atmosphere */
  --g-dot: rgba(13, 13, 13, .09);
  --g-glow: oklch(0.88 0.06 295 / .55);

  /* Shadows */
  --g-shadow-pop: 0 1px 2px rgba(16, 20, 24, .04);
  --g-shadow-seg: 0 1px 2px rgba(16, 20, 24, .08);
  --g-shadow-lg: 0 1px 2px rgba(16, 20, 24, .04), 0 12px 32px -12px rgba(16, 20, 24, .14);
  --g-shadow-card: 0 1px 2px rgba(16, 20, 24, .04), 0 24px 56px -24px rgba(40, 30, 110, .22);
  --g-shadow-menu: 0 16px 40px -12px rgba(0, 0, 0, .22), 0 2px 6px rgba(0, 0, 0, .06);
  --g-shadow-modal: 0 32px 80px -24px rgba(16, 20, 40, .45), 0 2px 6px rgba(16, 20, 24, .08);
  --g-scrim: rgba(13, 13, 20, .38);

  /* Older names still used by theme components. */
  --g-surface2: var(--g-band);
  --g-selected: var(--g-chip);
}

/* Large screens: lengths are in rem, so the whole page grows with the root font,
   in the same steps as sagan.vn; phones and laptops stay at 16px. */
@media (min-width: 1600px) and (min-height: 850px) { html { font-size: 17px; } }
@media (min-width: 1900px) and (min-height: 950px) { html { font-size: 18px; } }
@media (min-width: 2200px) and (min-height: 1150px) { html { font-size: 20px; } }
@media (min-width: 2500px) and (min-height: 1300px) { html { font-size: 22px; } }

html.dark {
  color-scheme: dark;
  --g-bg: #000000;
  --g-raised: #171717;
  --g-sunk: #0D0D0D;
  --g-chip: #262626;
  --g-band: #121212;
  --g-border: #2B2B2B;
  --g-border-strong: #383838;
  --g-divider: #1F1F1F;
  --g-slash: #404040;
  --g-seg-on: #303030;
  --g-bubble: #2B2B2B;
  --g-code-bg: #171717;
  --g-inline-code-bg: #262626;
  --g-hover: rgba(255, 255, 255, .1);

  --g-fg: #FFFFFF;
  --g-ink2: #E3E3E3;
  --g-fg2: #CDCDCD;
  --g-fg3: #AFAFAF;
  --g-icon: #8F8F8F;

  --g-accent: #A09CF0;
  --g-accent-hover: #B0ADFB;
  --g-accent-text: #C1BBFC;
  --g-accent-soft: #2D2B4D;
  --g-accent-line: #3D3A66;
  --g-accent-fg: #15112E;
  --g-cite: #2D2B4D;
  --g-mark: #3A3670;

  --g-inv: #FFFFFF;
  --g-inv-fg: #0D0D0D;

  --s-mark-star: #E9E5FF;
  --s-mark-orbit: .55;

  --g-teal: #7FD3D8;
  --g-teal-soft: #0F2A2C;
  --g-teal-line: #1E4447;

  --g-ok-text: #8FD9B6;
  --g-warn-text: #F2C879;
  --g-warn-soft: #2A2110;
  --g-warn-line: #4A3A1C;
  --g-err-text: #F4A9A9;
  --g-err-soft: #2D1416;
  --g-err-line: #4D2226;

  --g-dot: rgba(255, 255, 255, .07);
  --g-glow: oklch(0.40 0.11 295 / .45);

  --g-shadow-pop: 0 1px 2px rgba(0, 0, 0, .4);
  --g-shadow-seg: 0 1px 2px rgba(0, 0, 0, .5);
  --g-shadow-lg: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .6);
  --g-shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 24px 56px -24px rgba(0, 0, 0, .8);
  --g-shadow-menu: 0 16px 40px -12px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .5);
  --g-shadow-modal: 0 32px 80px -24px rgba(0, 0, 0, .9), 0 2px 6px rgba(0, 0, 0, .5);
  --g-scrim: rgba(0, 0, 0, .6);
}

/* Sagan Docs brand: the Sagan mark of sagan.vn (planet, orbit ring and star) and
   the name. "Sagan" is set like the company wordmark (bold capitals, wide
   tracking), "Docs" in the UI font. The star is pale on dark grounds, as on
   sagan.vn, and violet on light ones, where the pale star would disappear. */
.s-brand { display: inline-flex; align-items: center; gap: .5625rem; flex-shrink: 0; color: var(--g-fg); text-decoration: none; }
.s-brand .s-mark { width: 1.875rem; height: 1.875rem; flex-shrink: 0; display: block; overflow: visible; }
.s-mark-orbit { opacity: var(--s-mark-orbit); }
.s-mark-star { fill: var(--s-mark-star); }
.s-brand-name { display: inline-flex; align-items: baseline; gap: .4375rem; font-size: 1rem; line-height: 1; white-space: nowrap; }
.s-brand-name b { font-family: var(--s-brand-font); font-weight: 700; font-size: .9375rem; letter-spacing: .14em; text-transform: uppercase; margin-right: -.14em; }
.s-brand-name span { font-weight: 500; letter-spacing: -.01em; color: var(--g-fg3); }

/* Genie logo pair: the light mark on light grounds, the dark variant in dark mode. */
.g-logo-dark { display: none !important; }
html.dark .g-logo-light { display: none !important; }
html.dark .g-logo-dark { display: block !important; }
.g-wordmark { font-family: var(--g-wordmark); font-weight: 500; letter-spacing: -.02em; }