Tokens

/* asadesignsystem. GENERATED by scripts/build-tokens.mjs from tokens/brands/goask.json + tokens/tokens.json, do not edit.
   Fonts: https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono&display=swap */
:root, [data-theme="light"] {
  --bg: #f2f2ef; /** Page ground: a neutral light grey (Asad, 9 Oct: cream stays a minor colour). Dark: GoAsk Ink Black #1C2127. */
  --surface: #ffffff; /** Cards, panels, menus, modals: white. Dark: one step up from Ink Black. */
  --surface-2: #fbf9f3; /** GoAsk Cream #FBF9F3, used small: table header, hover rows, inset wells. */
  --surface-3: #e9e9e5; /** Neutral fill for secondary buttons, chips, inputs, disabled buttons, tracks. */
  --ink: #161513; /** GoAsk Ink Text #161513 for headings and body. Dark: near-white #F4F5F6. Never cream text. */
  --muted: #666258; /** Secondary text and placeholders: GoAsk Warm Grey #8A8577 deepened to 4.7:1 on surface-3. Dark: GoAsk Grey on Dark #9AA1AA. */
  --faint: #a6a296; /** Decorative icons and dividers only, never text. */
  --line: #e7e2d6; /** GoAsk Card Border #E7E2D6: hairlines and row dividers. */
  --control: #8a8577; /** Form control borders: GoAsk Warm Grey #8A8577 (3.5:1 on white). */
  --accent: #4f9a96; /** Focus rings, progress, switch on, chart-1: GoAsk Teal deepened to #4F9A96 for 3:1 on white. Dark: GoAsk Teal #5FB9B5. */
  --accent-strong: #4f9a96; /** Same as accent (kept for the shared token list). */
  --accent-deep: #38807d; /** Teal FILL under white text: GoAsk Teal deepened to #38807D so white reaches 4.6:1 (primary button, count badge, checked box, current page). Asad, 10 Oct: white on teal looks classier; brand #5FB9B5 with white is only 2.3:1. */
  --accent-ink: #00688c; /** Accent TEXT and icons: GoAsk Link Blue #00688C on light. Dark: GoAsk Teal #5FB9B5. */
  --accent-soft: #e2efe9; /** Soft teal fill: tonal button, selected row, info banner. */
  --on-accent: #ffffff; /** Text on the teal fill: white, 4.6:1 on accent-deep. Never cream. */
  --navy: #1c2127; /** Always-dark surfaces (code blocks, dark hero): GoAsk Ink Black #1C2127. */
  --on-navy: #ffffff; /** Text on navy: white (never cream). */
  --navy-muted: #9aa1aa; /** Secondary text on navy: GoAsk Grey on Dark #9AA1AA. */
  --navy-accent: #5fb9b5; /** Accent text on navy: GoAsk Teal #5FB9B5. */
  --inverse: #1c2127; /** Toast, tooltip, dark button: GoAsk Ink Black #1C2127. */
  --on-inverse: #ffffff; /** Text on inverse: white (never cream). */
  --danger-solid: #d13438; /** Solid destructive fill (delete, revoke) with white text, 4.9:1 in both themes. (same as the base system) */
  --ok: #23805b; /** Success text and icons: live, passed, done. (same as the base system) */
  --ok-bg: #e2f5ee; /** Success pill and banner surface. (same as the base system) */
  --ok-ink: #1f7a55; /** Success text on ok-bg (4.7:1 light). (same as the base system) */
  --danger: #d13438; /** Error and destructive text and icons, invalid field border. (same as the base system) */
  --danger-bg: #fdecec; /** Error pill and banner surface. (same as the base system) */
  --danger-ink: #b8292f; /** Error text on danger-bg (5.4:1 light). (same as the base system) */
  --warn: #a8650f; /** Warning and in-progress text and icons. (same as the base system) */
  --warn-bg: #fbf0dd; /** Warning pill and banner surface. (same as the base system) */
  --warn-ink: #8a5a12; /** Warning text on warn-bg (5.2:1 light). (same as the base system) */
  --shadow-card: 0 9px 30px rgba(28,33,39,0.07), 0 2px 6px rgba(28,33,39,0.04); /** Lift for floating things only: menus, popovers, a hovered card. Resting cards carry NO shadow and no border; they sit white on bg (measured on BWA's dashboard). */
  --shadow-sm: 0 1px 2px rgba(28,33,39,0.06); /** Controls and the selected segment. */
  --shadow-hover: 0 14px 34px rgba(28,33,39,0.11); /** Hover on an interactive card or quiet button. The shadow grows, nothing moves. */
  --space-1: 4px; /** Icon-to-label gap, tight insets. */
  --space-2: 8px; /** Chip padding, small gaps. */
  --space-3: 12px; /** Control padding, list-row gap. */
  --space-4: 16px; /** Default card padding, field gap. */
  --space-5: 20px; /** Small card and list padding. */
  --space-6: 24px; /** Section gap. */
  --space-8: 32px; /** Page gutter, block separation. */
  --space-card: 30px; /** Card padding (measured on BWA's dashboard cards); 24px (space-6) on dense grids of small cards. */
  --radius-sm: 8px; /** Inputs, small chips, menu items. */
  --radius-md: 12px; /** Icon buttons, alerts, menus, toasts. */
  --radius-lg: 16px; /** Cards, panels, modals. Also the Tailwind --radius base. */
  --radius-header: 22px; /** Bottom corners of the navy page header. */
  --radius-panel: 26px; /** Large white panels such as the sidebar card (measured on BWA). */
  --radius-pill: 100px; /** Buttons, status pills, segmented control, toggles. */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-size-display: 32px;
  --line-height-display: 48px;
  --font-weight-display: 700;
  --font-size-h1: 26px;
  --line-height-h1: 39px;
  --font-weight-h1: 700;
  --font-size-h2: 24px;
  --line-height-h2: 36px;
  --font-weight-h2: 700;
  --font-size-title: 20px;
  --line-height-title: 30px;
  --font-weight-title: 700;
  --font-size-eyebrow: 18px;
  --line-height-eyebrow: 27px;
  --font-weight-eyebrow: 600;
  --font-size-body: 16px;
  --line-height-body: 24px;
  --font-weight-body: 400;
  --font-size-body-light: 16px;
  --line-height-body-light: 24px;
  --font-weight-body-light: 300;
  --font-size-label: 16px;
  --line-height-label: 24px;
  --font-weight-label: 500;
  --font-size-meta: 14px;
  --line-height-meta: 21px;
  --font-weight-meta: 400;
  --font-size-button: 16px;
  --line-height-button: 24px;
  --font-weight-button: 600;
  --font-size-mono: 13px;
  --line-height-mono: 18px;
  --font-weight-mono: 400;
}

[data-theme="dark"], .dark {
  --bg: #1c2127; /** Page ground: a neutral light grey (Asad, 9 Oct: cream stays a minor colour). Dark: GoAsk Ink Black #1C2127. */
  --surface: #24292f; /** Cards, panels, menus, modals: white. Dark: one step up from Ink Black. */
  --surface-2: #2c3136; /** GoAsk Cream #FBF9F3, used small: table header, hover rows, inset wells. */
  --surface-3: #31363c; /** Neutral fill for secondary buttons, chips, inputs, disabled buttons, tracks. */
  --ink: #f4f5f6; /** GoAsk Ink Text #161513 for headings and body. Dark: near-white #F4F5F6. Never cream text. */
  --muted: #9aa1aa; /** Secondary text and placeholders: GoAsk Warm Grey #8A8577 deepened to 4.7:1 on surface-3. Dark: GoAsk Grey on Dark #9AA1AA. */
  --faint: #6e7175; /** Decorative icons and dividers only, never text. */
  --line: #373c41; /** GoAsk Card Border #E7E2D6: hairlines and row dividers. */
  --control: #73777c; /** Form control borders: GoAsk Warm Grey #8A8577 (3.5:1 on white). */
  --accent: #5fb9b5; /** Focus rings, progress, switch on, chart-1: GoAsk Teal deepened to #4F9A96 for 3:1 on white. Dark: GoAsk Teal #5FB9B5. */
  --accent-strong: #5fb9b5; /** Same as accent (kept for the shared token list). */
  --accent-ink: #5fb9b5; /** Accent TEXT and icons: GoAsk Link Blue #00688C on light. Dark: GoAsk Teal #5FB9B5. */
  --accent-soft: #283c41; /** Soft teal fill: tonal button, selected row, info banner. */
  --navy: #14181d; /** Always-dark surfaces (code blocks, dark hero): GoAsk Ink Black #1C2127. */
  --inverse: #2c3136; /** Toast, tooltip, dark button: GoAsk Ink Black #1C2127. */
  --ok: #35c57f; /** Success text and icons: live, passed, done. (same as the base system) */
  --ok-bg: #123726; /** Success pill and banner surface. (same as the base system) */
  --ok-ink: #7ee0a8; /** Success text on ok-bg (4.7:1 light). (same as the base system) */
  --danger: #f08a8a; /** Error and destructive text and icons, invalid field border. (same as the base system) */
  --danger-bg: #3a1e1e; /** Error pill and banner surface. (same as the base system) */
  --danger-ink: #f3a3a3; /** Error text on danger-bg (5.4:1 light). (same as the base system) */
  --warn: #e0a64a; /** Warning and in-progress text and icons. (same as the base system) */
  --warn-bg: #352c12; /** Warning pill and banner surface. (same as the base system) */
  --warn-ink: #e8be7a; /** Warning text on warn-bg (5.2:1 light). (same as the base system) */
  --shadow-card: 0 9px 30px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25); /** Lift for floating things only: menus, popovers, a hovered card. Resting cards carry NO shadow and no border; they sit white on bg (measured on BWA's dashboard). */
  --shadow-hover: 0 14px 34px rgba(0,0,0,0.5); /** Hover on an interactive card or quiet button. The shadow grows, nothing moves. */
}

/* asadesignsystem. GENERATED by scripts/build-tokens.mjs from tokens/brands/goask.json + tokens/tokens.json, do not edit.
   Fonts: https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono&display=swap In globals.css: @import "tailwindcss"; @import "tw-animate-css"; @import "shadcn/tailwind.css"; then this file. */
:root, [data-theme="light"] {
  --bg: #f2f2ef; /** Page ground: a neutral light grey (Asad, 9 Oct: cream stays a minor colour). Dark: GoAsk Ink Black #1C2127. */
  --surface: #ffffff; /** Cards, panels, menus, modals: white. Dark: one step up from Ink Black. */
  --surface-2: #fbf9f3; /** GoAsk Cream #FBF9F3, used small: table header, hover rows, inset wells. */
  --surface-3: #e9e9e5; /** Neutral fill for secondary buttons, chips, inputs, disabled buttons, tracks. */
  --ink: #161513; /** GoAsk Ink Text #161513 for headings and body. Dark: near-white #F4F5F6. Never cream text. */
  --muted: #666258; /** Secondary text and placeholders: GoAsk Warm Grey #8A8577 deepened to 4.7:1 on surface-3. Dark: GoAsk Grey on Dark #9AA1AA. */
  --faint: #a6a296; /** Decorative icons and dividers only, never text. */
  --line: #e7e2d6; /** GoAsk Card Border #E7E2D6: hairlines and row dividers. */
  --control: #8a8577; /** Form control borders: GoAsk Warm Grey #8A8577 (3.5:1 on white). */
  --accent: #4f9a96; /** Focus rings, progress, switch on, chart-1: GoAsk Teal deepened to #4F9A96 for 3:1 on white. Dark: GoAsk Teal #5FB9B5. */
  --accent-strong: #4f9a96; /** Same as accent (kept for the shared token list). */
  --accent-deep: #38807d; /** Teal FILL under white text: GoAsk Teal deepened to #38807D so white reaches 4.6:1 (primary button, count badge, checked box, current page). Asad, 10 Oct: white on teal looks classier; brand #5FB9B5 with white is only 2.3:1. */
  --accent-ink: #00688c; /** Accent TEXT and icons: GoAsk Link Blue #00688C on light. Dark: GoAsk Teal #5FB9B5. */
  --accent-soft: #e2efe9; /** Soft teal fill: tonal button, selected row, info banner. */
  --on-accent: #ffffff; /** Text on the teal fill: white, 4.6:1 on accent-deep. Never cream. */
  --navy: #1c2127; /** Always-dark surfaces (code blocks, dark hero): GoAsk Ink Black #1C2127. */
  --on-navy: #ffffff; /** Text on navy: white (never cream). */
  --navy-muted: #9aa1aa; /** Secondary text on navy: GoAsk Grey on Dark #9AA1AA. */
  --navy-accent: #5fb9b5; /** Accent text on navy: GoAsk Teal #5FB9B5. */
  --inverse: #1c2127; /** Toast, tooltip, dark button: GoAsk Ink Black #1C2127. */
  --on-inverse: #ffffff; /** Text on inverse: white (never cream). */
  --danger-solid: #d13438; /** Solid destructive fill (delete, revoke) with white text, 4.9:1 in both themes. (same as the base system) */
  --ok: #23805b; /** Success text and icons: live, passed, done. (same as the base system) */
  --ok-bg: #e2f5ee; /** Success pill and banner surface. (same as the base system) */
  --ok-ink: #1f7a55; /** Success text on ok-bg (4.7:1 light). (same as the base system) */
  --danger: #d13438; /** Error and destructive text and icons, invalid field border. (same as the base system) */
  --danger-bg: #fdecec; /** Error pill and banner surface. (same as the base system) */
  --danger-ink: #b8292f; /** Error text on danger-bg (5.4:1 light). (same as the base system) */
  --warn: #a8650f; /** Warning and in-progress text and icons. (same as the base system) */
  --warn-bg: #fbf0dd; /** Warning pill and banner surface. (same as the base system) */
  --warn-ink: #8a5a12; /** Warning text on warn-bg (5.2:1 light). (same as the base system) */
  --shadow-card: 0 9px 30px rgba(28,33,39,0.07), 0 2px 6px rgba(28,33,39,0.04); /** Lift for floating things only: menus, popovers, a hovered card. Resting cards carry NO shadow and no border; they sit white on bg (measured on BWA's dashboard). */
  --shadow-sm: 0 1px 2px rgba(28,33,39,0.06); /** Controls and the selected segment. */
  --shadow-hover: 0 14px 34px rgba(28,33,39,0.11); /** Hover on an interactive card or quiet button. The shadow grows, nothing moves. */
  --space-1: 4px; /** Icon-to-label gap, tight insets. */
  --space-2: 8px; /** Chip padding, small gaps. */
  --space-3: 12px; /** Control padding, list-row gap. */
  --space-4: 16px; /** Default card padding, field gap. */
  --space-5: 20px; /** Small card and list padding. */
  --space-6: 24px; /** Section gap. */
  --space-8: 32px; /** Page gutter, block separation. */
  --space-card: 30px; /** Card padding (measured on BWA's dashboard cards); 24px (space-6) on dense grids of small cards. */
  --radius-sm: 8px; /** Inputs, small chips, menu items. */
  --radius-md: 12px; /** Icon buttons, alerts, menus, toasts. */
  --radius-lg: 16px; /** Cards, panels, modals. Also the Tailwind --radius base. */
  --radius-header: 22px; /** Bottom corners of the navy page header. */
  --radius-panel: 26px; /** Large white panels such as the sidebar card (measured on BWA). */
  --radius-pill: 100px; /** Buttons, status pills, segmented control, toggles. */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-size-display: 32px;
  --line-height-display: 48px;
  --font-weight-display: 700;
  --font-size-h1: 26px;
  --line-height-h1: 39px;
  --font-weight-h1: 700;
  --font-size-h2: 24px;
  --line-height-h2: 36px;
  --font-weight-h2: 700;
  --font-size-title: 20px;
  --line-height-title: 30px;
  --font-weight-title: 700;
  --font-size-eyebrow: 18px;
  --line-height-eyebrow: 27px;
  --font-weight-eyebrow: 600;
  --font-size-body: 16px;
  --line-height-body: 24px;
  --font-weight-body: 400;
  --font-size-body-light: 16px;
  --line-height-body-light: 24px;
  --font-weight-body-light: 300;
  --font-size-label: 16px;
  --line-height-label: 24px;
  --font-weight-label: 500;
  --font-size-meta: 14px;
  --line-height-meta: 21px;
  --font-weight-meta: 400;
  --font-size-button: 16px;
  --line-height-button: 24px;
  --font-weight-button: 600;
  --font-size-mono: 13px;
  --line-height-mono: 18px;
  --font-weight-mono: 400;
}

[data-theme="dark"], .dark {
  --bg: #1c2127; /** Page ground: a neutral light grey (Asad, 9 Oct: cream stays a minor colour). Dark: GoAsk Ink Black #1C2127. */
  --surface: #24292f; /** Cards, panels, menus, modals: white. Dark: one step up from Ink Black. */
  --surface-2: #2c3136; /** GoAsk Cream #FBF9F3, used small: table header, hover rows, inset wells. */
  --surface-3: #31363c; /** Neutral fill for secondary buttons, chips, inputs, disabled buttons, tracks. */
  --ink: #f4f5f6; /** GoAsk Ink Text #161513 for headings and body. Dark: near-white #F4F5F6. Never cream text. */
  --muted: #9aa1aa; /** Secondary text and placeholders: GoAsk Warm Grey #8A8577 deepened to 4.7:1 on surface-3. Dark: GoAsk Grey on Dark #9AA1AA. */
  --faint: #6e7175; /** Decorative icons and dividers only, never text. */
  --line: #373c41; /** GoAsk Card Border #E7E2D6: hairlines and row dividers. */
  --control: #73777c; /** Form control borders: GoAsk Warm Grey #8A8577 (3.5:1 on white). */
  --accent: #5fb9b5; /** Focus rings, progress, switch on, chart-1: GoAsk Teal deepened to #4F9A96 for 3:1 on white. Dark: GoAsk Teal #5FB9B5. */
  --accent-strong: #5fb9b5; /** Same as accent (kept for the shared token list). */
  --accent-ink: #5fb9b5; /** Accent TEXT and icons: GoAsk Link Blue #00688C on light. Dark: GoAsk Teal #5FB9B5. */
  --accent-soft: #283c41; /** Soft teal fill: tonal button, selected row, info banner. */
  --navy: #14181d; /** Always-dark surfaces (code blocks, dark hero): GoAsk Ink Black #1C2127. */
  --inverse: #2c3136; /** Toast, tooltip, dark button: GoAsk Ink Black #1C2127. */
  --ok: #35c57f; /** Success text and icons: live, passed, done. (same as the base system) */
  --ok-bg: #123726; /** Success pill and banner surface. (same as the base system) */
  --ok-ink: #7ee0a8; /** Success text on ok-bg (4.7:1 light). (same as the base system) */
  --danger: #f08a8a; /** Error and destructive text and icons, invalid field border. (same as the base system) */
  --danger-bg: #3a1e1e; /** Error pill and banner surface. (same as the base system) */
  --danger-ink: #f3a3a3; /** Error text on danger-bg (5.4:1 light). (same as the base system) */
  --warn: #e0a64a; /** Warning and in-progress text and icons. (same as the base system) */
  --warn-bg: #352c12; /** Warning pill and banner surface. (same as the base system) */
  --warn-ink: #e8be7a; /** Warning text on warn-bg (5.2:1 light). (same as the base system) */
  --shadow-card: 0 9px 30px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25); /** Lift for floating things only: menus, popovers, a hovered card. Resting cards carry NO shadow and no border; they sit white on bg (measured on BWA's dashboard). */
  --shadow-hover: 0 14px 34px rgba(0,0,0,0.5); /** Hover on an interactive card or quiet button. The shadow grows, nothing moves. */
}
:root {
  --radius: var(--radius-lg);
  --sc-background: var(--bg);
  --sc-foreground: var(--ink);
  --sc-card: var(--surface);
  --sc-card-foreground: var(--ink);
  --sc-popover: var(--surface);
  --sc-popover-foreground: var(--ink);
  --sc-primary: var(--accent-deep);
  --sc-primary-foreground: var(--on-accent);
  --sc-secondary: var(--surface-3);
  --sc-secondary-foreground: var(--ink);
  --sc-muted: var(--surface-2);
  --sc-muted-foreground: var(--muted);
  --sc-accent: var(--accent-soft);
  --sc-accent-foreground: var(--accent-ink);
  --sc-destructive: var(--danger-solid);
  --sc-border: var(--line);
  --sc-input: var(--control);
  --sc-ring: var(--accent);
  --sc-chart-1: var(--accent);
  --sc-chart-2: var(--ok);
  --sc-chart-3: var(--warn);
  --sc-chart-4: var(--ink);
  --sc-chart-5: var(--danger);
  --sc-sidebar: var(--surface);
  --sc-sidebar-foreground: var(--ink);
  --sc-sidebar-primary: var(--accent-deep);
  --sc-sidebar-primary-foreground: var(--on-accent);
  --sc-sidebar-accent: var(--accent-soft);
  --sc-sidebar-accent-foreground: var(--accent-ink);
  --sc-sidebar-border: var(--line);
  --sc-sidebar-ring: var(--accent);
  /* shadcn's raw names (not accent / muted: those are this system's own tokens; use --sc-accent, --sc-muted) */
  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--surface);
  --card-foreground: var(--ink);
  --popover: var(--surface);
  --popover-foreground: var(--ink);
  --primary: var(--accent-deep);
  --primary-foreground: var(--on-accent);
  --secondary: var(--surface-3);
  --secondary-foreground: var(--ink);
  --muted-foreground: var(--muted);
  --accent-foreground: var(--accent-ink);
  --destructive: var(--danger-solid);
  --border: var(--line);
  --input: var(--control);
  --ring: var(--accent);
  --chart-1: var(--accent);
  --chart-2: var(--ok);
  --chart-3: var(--warn);
  --chart-4: var(--ink);
  --chart-5: var(--danger);
  --sidebar: var(--surface);
  --sidebar-foreground: var(--ink);
  --sidebar-primary: var(--accent-deep);
  --sidebar-primary-foreground: var(--on-accent);
  --sidebar-accent: var(--accent-soft);
  --sidebar-accent-foreground: var(--accent-ink);
  --sidebar-border: var(--line);
  --sidebar-ring: var(--accent);
}
/* Keys Tailwind must know by name; the value is the light one, the unlayered :root / dark variables win at runtime. */
@theme {
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius-pill: 100px;
  --shadow-card: 0 9px 30px rgba(28,33,39,0.07), 0 2px 6px rgba(28,33,39,0.04);
  --shadow-hover: 0 14px 34px rgba(28,33,39,0.11);
}
@theme inline {
  --radius-sm: calc(var(--radius) - 8px);
  --radius-md: calc(var(--radius) - 4px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--sc-background);
  --color-foreground: var(--sc-foreground);
  --color-card: var(--sc-card);
  --color-card-foreground: var(--sc-card-foreground);
  --color-popover: var(--sc-popover);
  --color-popover-foreground: var(--sc-popover-foreground);
  --color-primary: var(--sc-primary);
  --color-primary-foreground: var(--sc-primary-foreground);
  --color-secondary: var(--sc-secondary);
  --color-secondary-foreground: var(--sc-secondary-foreground);
  --color-muted: var(--sc-muted);
  --color-muted-foreground: var(--sc-muted-foreground);
  --color-accent: var(--sc-accent);
  --color-accent-foreground: var(--sc-accent-foreground);
  --color-destructive: var(--sc-destructive);
  --color-border: var(--sc-border);
  --color-input: var(--sc-input);
  --color-ring: var(--sc-ring);
  --color-chart-1: var(--sc-chart-1);
  --color-chart-2: var(--sc-chart-2);
  --color-chart-3: var(--sc-chart-3);
  --color-chart-4: var(--sc-chart-4);
  --color-chart-5: var(--sc-chart-5);
  --color-sidebar: var(--sc-sidebar);
  --color-sidebar-foreground: var(--sc-sidebar-foreground);
  --color-sidebar-primary: var(--sc-sidebar-primary);
  --color-sidebar-primary-foreground: var(--sc-sidebar-primary-foreground);
  --color-sidebar-accent: var(--sc-sidebar-accent);
  --color-sidebar-accent-foreground: var(--sc-sidebar-accent-foreground);
  --color-sidebar-border: var(--sc-sidebar-border);
  --color-sidebar-ring: var(--sc-sidebar-ring);
  /* every token is a utility too: bg-navy, text-navy-accent, bg-ok-bg, text-danger-ink, bg-accent-soft ... */
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-surface-2: var(--surface-2);
  --color-surface-3: var(--surface-3);
  --color-ink: var(--ink);
  --color-faint: var(--faint);
  --color-line: var(--line);
  --color-control: var(--control);
  --color-accent-strong: var(--accent-strong);
  --color-accent-deep: var(--accent-deep);
  --color-accent-ink: var(--accent-ink);
  --color-accent-soft: var(--accent-soft);
  --color-on-accent: var(--on-accent);
  --color-navy: var(--navy);
  --color-on-navy: var(--on-navy);
  --color-navy-muted: var(--navy-muted);
  --color-navy-accent: var(--navy-accent);
  --color-inverse: var(--inverse);
  --color-on-inverse: var(--on-inverse);
  --color-danger-solid: var(--danger-solid);
  --color-ok: var(--ok);
  --color-ok-bg: var(--ok-bg);
  --color-ok-ink: var(--ok-ink);
  --color-danger: var(--danger);
  --color-danger-bg: var(--danger-bg);
  --color-danger-ink: var(--danger-ink);
  --color-warn: var(--warn);
  --color-warn-bg: var(--warn-bg);
  --color-warn-ink: var(--warn-ink);
}
@custom-variant dark (&:is(.dark *, [data-theme="dark"] *));
@layer base {
  *, ::before, ::after { border-color: var(--color-border); outline-color: color-mix(in oklab, var(--color-ring) 50%, transparent); }
}

// GENERATED by scripts/build-tokens.mjs from tokens/brands/goask.json + tokens/tokens.json, do not edit.
// The second theme only lists the tokens that differ from the first.
export const tokens = {
  "light": {
    "bg": "#f2f2ef",
    "surface": "#ffffff",
    "surface-2": "#fbf9f3",
    "surface-3": "#e9e9e5",
    "ink": "#161513",
    "muted": "#666258",
    "faint": "#a6a296",
    "line": "#e7e2d6",
    "control": "#8a8577",
    "accent": "#4f9a96",
    "accent-strong": "#4f9a96",
    "accent-deep": "#38807d",
    "accent-ink": "#00688c",
    "accent-soft": "#e2efe9",
    "on-accent": "#ffffff",
    "navy": "#1c2127",
    "on-navy": "#ffffff",
    "navy-muted": "#9aa1aa",
    "navy-accent": "#5fb9b5",
    "inverse": "#1c2127",
    "on-inverse": "#ffffff",
    "danger-solid": "#d13438",
    "ok": "#23805b",
    "ok-bg": "#e2f5ee",
    "ok-ink": "#1f7a55",
    "danger": "#d13438",
    "danger-bg": "#fdecec",
    "danger-ink": "#b8292f",
    "warn": "#a8650f",
    "warn-bg": "#fbf0dd",
    "warn-ink": "#8a5a12",
    "shadow-card": "0 9px 30px rgba(28,33,39,0.07), 0 2px 6px rgba(28,33,39,0.04)",
    "shadow-sm": "0 1px 2px rgba(28,33,39,0.06)",
    "shadow-hover": "0 14px 34px rgba(28,33,39,0.11)",
    "space-1": "4px",
    "space-2": "8px",
    "space-3": "12px",
    "space-4": "16px",
    "space-5": "20px",
    "space-6": "24px",
    "space-8": "32px",
    "space-card": "30px",
    "radius-sm": "8px",
    "radius-md": "12px",
    "radius-lg": "16px",
    "radius-header": "22px",
    "radius-panel": "26px",
    "radius-pill": "100px",
    "font-sans": "\"Poppins\", system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
    "font-mono": "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
    "font-size-display": "32px",
    "line-height-display": "48px",
    "font-weight-display": "700",
    "font-size-h1": "26px",
    "line-height-h1": "39px",
    "font-weight-h1": "700",
    "font-size-h2": "24px",
    "line-height-h2": "36px",
    "font-weight-h2": "700",
    "font-size-title": "20px",
    "line-height-title": "30px",
    "font-weight-title": "700",
    "font-size-eyebrow": "18px",
    "line-height-eyebrow": "27px",
    "font-weight-eyebrow": "600",
    "font-size-body": "16px",
    "line-height-body": "24px",
    "font-weight-body": "400",
    "font-size-body-light": "16px",
    "line-height-body-light": "24px",
    "font-weight-body-light": "300",
    "font-size-label": "16px",
    "line-height-label": "24px",
    "font-weight-label": "500",
    "font-size-meta": "14px",
    "line-height-meta": "21px",
    "font-weight-meta": "400",
    "font-size-button": "16px",
    "line-height-button": "24px",
    "font-weight-button": "600",
    "font-size-mono": "13px",
    "line-height-mono": "18px",
    "font-weight-mono": "400"
  },
  "dark": {
    "bg": "#1c2127",
    "surface": "#24292f",
    "surface-2": "#2c3136",
    "surface-3": "#31363c",
    "ink": "#f4f5f6",
    "muted": "#9aa1aa",
    "faint": "#6e7175",
    "line": "#373c41",
    "control": "#73777c",
    "accent": "#5fb9b5",
    "accent-strong": "#5fb9b5",
    "accent-ink": "#5fb9b5",
    "accent-soft": "#283c41",
    "navy": "#14181d",
    "inverse": "#2c3136",
    "ok": "#35c57f",
    "ok-bg": "#123726",
    "ok-ink": "#7ee0a8",
    "danger": "#f08a8a",
    "danger-bg": "#3a1e1e",
    "danger-ink": "#f3a3a3",
    "warn": "#e0a64a",
    "warn-bg": "#352c12",
    "warn-ink": "#e8be7a",
    "shadow-card": "0 9px 30px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25)",
    "shadow-hover": "0 14px 34px rgba(0,0,0,0.5)"
  }
};
export default tokens;