/* theme-gronkie.css: from brands.css and bundle.css. Generated by scripts/split-ds-css.mjs, do not edit; rerun it after re-copying the design system. */
:root {
  --gronkie-orange: #da7549;
  --gronkie-orange-600: #c9663b;
  --gronkie-orange-700: #9c4822;
  --gronkie-ink: #121212;
  --gronkie-sand: #eae0da;
  --gronkie-cream: #fbf7f4;
  --gronkie-mauve: #8f8898;
  --gronkie-mauve-700: #5c5566;
  --gronkie-lavender: #c3bfc7;
  --gronkie-steel: #437192;
  --gronkie-steel-50: #e8eff5;
  --gronkie-line: #e6ded8;
  --gronkie-line-strong: #8a8291;
  --gronkie-night: #17151a;
  --gronkie-night-sunken: #201d24;
  --gronkie-night-feature: #2b2630;
  --gronkie-night-deep: #0c0b0e;
  --gronkie-night-text: #f3ece7;
  --gronkie-night-muted: #bdb4c4;
  --gronkie-night-line: #3a3540;
  --gronkie-orange-400: #e58a62;
  --gronkie-orange-300: #f2a37f;
  --gronkie-steel-700: #2f5873;
  --gronkie-steel-600: #416f8f;
  --gronkie-steel-300: #9cc1dc;
  --gronkie-steel-950: #18252f;
}


:root, [data-theme^="gronkie"] {
  --brand-font-display: var(--font-display);
  --brand-font-body: var(--font-body);
}

/* ---------- Light and dark mode ----------
   Brand: data-theme="gronkie|brickatom|budbricks|budweb" on <html>.
   Mode: follows prefers-color-scheme; data-mode="light|dark" on <html> overrides it.
   data-mode on any element forces that mode for its subtree (previews, emails, print documents).
   The design-system page's own theme ids (gronkie-dark …) are dark by definition. */
:root:not([data-theme]), [data-theme="gronkie"] {
  --surface: var(--white);
  --surface-sunken: var(--gronkie-cream);
  --surface-feature: var(--gronkie-sand);
  --surface-inverse: var(--gronkie-ink);
  --text: var(--gronkie-ink);
  --text-muted: var(--gronkie-mauve-700);
  --text-inverse: var(--white);
  --border: var(--gronkie-line);
  --border-strong: var(--gronkie-line-strong);
  --accent: var(--gronkie-orange);
  --accent-hover: var(--gronkie-orange-600);
  --on-accent: var(--gronkie-ink);
  --accent-text: var(--gronkie-orange-700);
  --secondary: var(--gronkie-ink);
  --on-secondary: var(--white);
  --brand-2: var(--gronkie-steel);
  --focus: var(--gronkie-ink);
  --info: var(--gronkie-steel);
  --info-surface: var(--gronkie-steel-50);
  --danger: var(--red-700);
  --danger-surface: var(--red-50);
  --success: var(--green-700);
  --success-surface: var(--green-50);
  --warning: var(--amber-700);
  --warning-surface: var(--amber-50);
  --scrim: rgba(18, 18, 18, 0.48);
  --shadow-card: 0 1px 2px rgba(18, 18, 18, 0.08);
  --shadow-sheet: 0 -8px 32px rgba(18, 18, 18, 0.18);
  --shadow-sticker: 3px 3px 0 rgba(18, 18, 18, 1);
  --logo-on-light: block;
  --logo-on-dark: none;
  --logo-badge-bg: transparent;
  --logo-badge-pad: 0px;
  color-scheme: light;
}
[data-theme="gronkie-dark"] {
  --surface: var(--gronkie-night);
  --surface-sunken: var(--gronkie-night-sunken);
  --surface-feature: var(--gronkie-night-feature);
  --surface-inverse: var(--gronkie-night-deep);
  --text: var(--gronkie-night-text);
  --text-muted: var(--gronkie-night-muted);
  --text-inverse: var(--gronkie-night-text);
  --border: var(--gronkie-night-line);
  --border-strong: var(--gronkie-line-strong);
  --accent: var(--gronkie-orange);
  --accent-hover: var(--gronkie-orange-400);
  --on-accent: var(--gronkie-ink);
  --accent-text: var(--gronkie-orange-300);
  --secondary: var(--gronkie-night-text);
  --on-secondary: var(--gronkie-night);
  --brand-2: var(--gronkie-steel-600);
  --focus: var(--gronkie-night-text);
  --info: var(--gronkie-steel-300);
  --info-surface: var(--gronkie-steel-950);
  --danger: var(--red-300);
  --danger-surface: var(--red-950);
  --success: var(--green-300);
  --success-surface: var(--green-950);
  --warning: var(--amber-300);
  --warning-surface: var(--amber-950);
  --scrim: rgba(0, 0, 0, 0.64);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.6);
  --shadow-sticker: 3px 3px 0 rgba(218, 117, 73, 1);
  --logo-on-light: none;
  --logo-on-dark: block;
  --logo-badge-bg: #ffffff;
  --logo-badge-pad: 4px 8px;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]):not([data-mode="light"]), [data-theme="gronkie"]:not([data-mode="light"]) {
  --surface: var(--gronkie-night);
  --surface-sunken: var(--gronkie-night-sunken);
  --surface-feature: var(--gronkie-night-feature);
  --surface-inverse: var(--gronkie-night-deep);
  --text: var(--gronkie-night-text);
  --text-muted: var(--gronkie-night-muted);
  --text-inverse: var(--gronkie-night-text);
  --border: var(--gronkie-night-line);
  --border-strong: var(--gronkie-line-strong);
  --accent: var(--gronkie-orange);
  --accent-hover: var(--gronkie-orange-400);
  --on-accent: var(--gronkie-ink);
  --accent-text: var(--gronkie-orange-300);
  --secondary: var(--gronkie-night-text);
  --on-secondary: var(--gronkie-night);
  --brand-2: var(--gronkie-steel-600);
  --focus: var(--gronkie-night-text);
  --info: var(--gronkie-steel-300);
  --info-surface: var(--gronkie-steel-950);
  --danger: var(--red-300);
  --danger-surface: var(--red-950);
  --success: var(--green-300);
  --success-surface: var(--green-950);
  --warning: var(--amber-300);
  --warning-surface: var(--amber-950);
  --scrim: rgba(0, 0, 0, 0.64);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.6);
  --shadow-sticker: 3px 3px 0 rgba(218, 117, 73, 1);
  --logo-on-light: none;
  --logo-on-dark: block;
  --logo-badge-bg: #ffffff;
  --logo-badge-pad: 4px 8px;
  color-scheme: dark;
  }
}
[data-theme^="gronkie"][data-theme][data-mode="dark"], [data-theme^="gronkie"][data-mode="dark"], [data-theme^="gronkie"] [data-mode="dark"], :root:not([data-theme])[data-mode="dark"], :root:not([data-theme]) [data-mode="dark"] {
  --surface: var(--gronkie-night);
  --surface-sunken: var(--gronkie-night-sunken);
  --surface-feature: var(--gronkie-night-feature);
  --surface-inverse: var(--gronkie-night-deep);
  --text: var(--gronkie-night-text);
  --text-muted: var(--gronkie-night-muted);
  --text-inverse: var(--gronkie-night-text);
  --border: var(--gronkie-night-line);
  --border-strong: var(--gronkie-line-strong);
  --accent: var(--gronkie-orange);
  --accent-hover: var(--gronkie-orange-400);
  --on-accent: var(--gronkie-ink);
  --accent-text: var(--gronkie-orange-300);
  --secondary: var(--gronkie-night-text);
  --on-secondary: var(--gronkie-night);
  --brand-2: var(--gronkie-steel-600);
  --focus: var(--gronkie-night-text);
  --info: var(--gronkie-steel-300);
  --info-surface: var(--gronkie-steel-950);
  --danger: var(--red-300);
  --danger-surface: var(--red-950);
  --success: var(--green-300);
  --success-surface: var(--green-950);
  --warning: var(--amber-300);
  --warning-surface: var(--amber-950);
  --scrim: rgba(0, 0, 0, 0.64);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.6);
  --shadow-sticker: 3px 3px 0 rgba(218, 117, 73, 1);
  --logo-on-light: none;
  --logo-on-dark: block;
  --logo-badge-bg: #ffffff;
  --logo-badge-pad: 4px 8px;
  color-scheme: dark;
}
[data-theme^="gronkie"][data-theme][data-mode="light"], [data-theme^="gronkie"][data-mode="light"], [data-theme^="gronkie"] [data-mode="light"], :root:not([data-theme])[data-mode="light"], :root:not([data-theme]) [data-mode="light"] {
  --surface: var(--white);
  --surface-sunken: var(--gronkie-cream);
  --surface-feature: var(--gronkie-sand);
  --surface-inverse: var(--gronkie-ink);
  --text: var(--gronkie-ink);
  --text-muted: var(--gronkie-mauve-700);
  --text-inverse: var(--white);
  --border: var(--gronkie-line);
  --border-strong: var(--gronkie-line-strong);
  --accent: var(--gronkie-orange);
  --accent-hover: var(--gronkie-orange-600);
  --on-accent: var(--gronkie-ink);
  --accent-text: var(--gronkie-orange-700);
  --secondary: var(--gronkie-ink);
  --on-secondary: var(--white);
  --brand-2: var(--gronkie-steel);
  --focus: var(--gronkie-ink);
  --info: var(--gronkie-steel);
  --info-surface: var(--gronkie-steel-50);
  --danger: var(--red-700);
  --danger-surface: var(--red-50);
  --success: var(--green-700);
  --success-surface: var(--green-50);
  --warning: var(--amber-700);
  --warning-surface: var(--amber-50);
  --scrim: rgba(18, 18, 18, 0.48);
  --shadow-card: 0 1px 2px rgba(18, 18, 18, 0.08);
  --shadow-sheet: 0 -8px 32px rgba(18, 18, 18, 0.18);
  --shadow-sticker: 3px 3px 0 rgba(18, 18, 18, 1);
  --logo-on-light: block;
  --logo-on-dark: none;
  --logo-badge-bg: transparent;
  --logo-badge-pad: 0px;
  color-scheme: light;
}/* Gronkie family — component styles. Loads after tokens.css.
   Every rule reads semantic tokens only; brands differ by [data-theme]. */

/* ---------- Brand overrides that tokens.json can't hold per theme (type, radius) ---------- */
:root, [data-theme^="gronkie"] {
  --brand-font-display: var(--font-display);
  --brand-font-body: var(--font-body);
  --brand-display-case: none;
}

/* ===== MODES (generated) ===== */
/* ---------- Light and dark mode ----------
   Brand: data-theme="gronkie|brickatom|budbricks|budweb" on <html>.
   Mode: follows prefers-color-scheme; data-mode="light|dark" on <html> overrides it.
   data-mode on any element forces that mode for its subtree (previews, emails, print documents).
   The design-system page's own theme ids (gronkie-dark …) are dark by definition. */
:root:not([data-theme]), [data-theme="gronkie"] {
  --logo-on-light: block;
  --logo-on-dark: none;
  --logo-badge-bg: transparent;
  --logo-badge-pad: 0px;
  color-scheme: light;
}
[data-theme="gronkie-dark"] {
  --logo-on-light: none;
  --logo-on-dark: block;
  --logo-badge-bg: #ffffff;
  --logo-badge-pad: 4px 8px;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]):not([data-mode="light"]), [data-theme="gronkie"]:not([data-mode="light"]) {
  --surface: var(--gronkie-night);
  --surface-sunken: var(--gronkie-night-sunken);
  --surface-feature: var(--gronkie-night-feature);
  --surface-inverse: var(--gronkie-night-deep);
  --text: var(--gronkie-night-text);
  --text-muted: var(--gronkie-night-muted);
  --text-inverse: var(--gronkie-night-text);
  --border: var(--gronkie-night-line);
  --border-strong: var(--gronkie-line-strong);
  --accent: var(--gronkie-orange);
  --accent-hover: var(--gronkie-orange-400);
  --on-accent: var(--gronkie-ink);
  --accent-text: var(--gronkie-orange-300);
  --secondary: var(--gronkie-night-text);
  --on-secondary: var(--gronkie-night);
  --brand-2: var(--gronkie-steel-600);
  --focus: var(--gronkie-night-text);
  --info: var(--gronkie-steel-300);
  --info-surface: var(--gronkie-steel-950);
  --danger: var(--red-300);
  --danger-surface: var(--red-950);
  --success: var(--green-300);
  --success-surface: var(--green-950);
  --warning: var(--amber-300);
  --warning-surface: var(--amber-950);
  --scrim: rgba(0, 0, 0, 0.64);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.6);
  --shadow-sticker: 3px 3px 0 rgba(218, 117, 73, 1);
  --logo-on-light: none;
  --logo-on-dark: block;
  --logo-badge-bg: #ffffff;
  --logo-badge-pad: 4px 8px;
  color-scheme: dark;
  }
}
[data-theme^="gronkie"][data-theme][data-mode="dark"], [data-theme^="gronkie"][data-mode="dark"], [data-theme^="gronkie"] [data-mode="dark"], :root:not([data-theme])[data-mode="dark"], :root:not([data-theme]) [data-mode="dark"] {
  --surface: var(--gronkie-night);
  --surface-sunken: var(--gronkie-night-sunken);
  --surface-feature: var(--gronkie-night-feature);
  --surface-inverse: var(--gronkie-night-deep);
  --text: var(--gronkie-night-text);
  --text-muted: var(--gronkie-night-muted);
  --text-inverse: var(--gronkie-night-text);
  --border: var(--gronkie-night-line);
  --border-strong: var(--gronkie-line-strong);
  --accent: var(--gronkie-orange);
  --accent-hover: var(--gronkie-orange-400);
  --on-accent: var(--gronkie-ink);
  --accent-text: var(--gronkie-orange-300);
  --secondary: var(--gronkie-night-text);
  --on-secondary: var(--gronkie-night);
  --brand-2: var(--gronkie-steel-600);
  --focus: var(--gronkie-night-text);
  --info: var(--gronkie-steel-300);
  --info-surface: var(--gronkie-steel-950);
  --danger: var(--red-300);
  --danger-surface: var(--red-950);
  --success: var(--green-300);
  --success-surface: var(--green-950);
  --warning: var(--amber-300);
  --warning-surface: var(--amber-950);
  --scrim: rgba(0, 0, 0, 0.64);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.6);
  --shadow-sticker: 3px 3px 0 rgba(218, 117, 73, 1);
  --logo-on-light: none;
  --logo-on-dark: block;
  --logo-badge-bg: #ffffff;
  --logo-badge-pad: 4px 8px;
  color-scheme: dark;
}
[data-theme^="gronkie"][data-theme][data-mode="light"], [data-theme^="gronkie"][data-mode="light"], [data-theme^="gronkie"] [data-mode="light"], :root:not([data-theme])[data-mode="light"], :root:not([data-theme]) [data-mode="light"] {
  --surface: var(--white);
  --surface-sunken: var(--gronkie-cream);
  --surface-feature: var(--gronkie-sand);
  --surface-inverse: var(--gronkie-ink);
  --text: var(--gronkie-ink);
  --text-muted: var(--gronkie-mauve-700);
  --text-inverse: var(--white);
  --border: var(--gronkie-line);
  --border-strong: var(--gronkie-line-strong);
  --accent: var(--gronkie-orange);
  --accent-hover: var(--gronkie-orange-600);
  --on-accent: var(--gronkie-ink);
  --accent-text: var(--gronkie-orange-700);
  --secondary: var(--gronkie-ink);
  --on-secondary: var(--white);
  --brand-2: var(--gronkie-steel);
  --focus: var(--gronkie-ink);
  --info: var(--gronkie-steel);
  --info-surface: var(--gronkie-steel-50);
  --danger: var(--red-700);
  --danger-surface: var(--red-50);
  --success: var(--green-700);
  --success-surface: var(--green-50);
  --warning: var(--amber-700);
  --warning-surface: var(--amber-50);
  --scrim: rgba(18, 18, 18, 0.48);
  --shadow-card: 0 1px 2px rgba(18, 18, 18, 0.08);
  --shadow-sheet: 0 -8px 32px rgba(18, 18, 18, 0.18);
  --shadow-sticker: 3px 3px 0 rgba(18, 18, 18, 1);
  --logo-on-light: block;
  --logo-on-dark: none;
  --logo-badge-bg: transparent;
  --logo-badge-pad: 0px;
  color-scheme: light;
}