/* MaggotClaw design kit 1.2 -- web tokens. GENERATED by generate.py from tokens/maggotclaw.tokens.json.
 * DO NOT EDIT BY HAND. Same variable names as IMAGO's tokens.css.
 * Link web/fonts/fonts.css first, then this file, then components.css (optional).
 *
 * Theme:  DARK by default (color-scheme: dark). Every colour is light-dark(LIGHT, DARK).
 *         Light: <html data-theme="light">. The switch itself is theme.js + theme.css.
 *         Follow the OS: <html data-theme="system">, or the page's own :root { color-scheme: light dark; }.
 *         Browsers without light-dark() stay dark unless data-theme="light" (or "system" + OS light).
 * Motion: <html data-motion="off"> forces no animation; data-motion="on" ignores the OS
 *         reduced-motion setting; no attribute = follow the OS. */

:root {
  color-scheme: dark;

  /* colour: dark values (the default, and the fallback without light-dark()) */
  --color-bg: #111316; /* app / window background */
  --color-surface: #181A1F; /* cards, panels, inputs, secondary buttons (raised = lighter) */
  --color-surface-2: #202329; /* sidebar, hover, menus, dialogs, table headings */
  --color-border: #2C3038; /* decorative dividers + card edges */
  --color-border-strong: #6B7280; /* input / checkbox / secondary-button outlines, >= 3:1 */
  --color-border-raised: rgba(255, 255, 255, 0.08); /* tk = the rgba blended over surface (tk has no alpha). Edge of a floating thing; dark mode shows height with this, never a shadow */
  --color-text: #E8EAED; /* main text */
  --color-text-muted: #A3A9B4; /* secondary text, labels, table headings */
  --color-text-subtle: #8B929E; /* hints, timestamps. Nothing dimmer than this */
  --color-accent: #7C93F2; /* dark indigo / light forest green: links, selection, active nav */
  --color-accent-hover: #94A7F5;
  --color-on-accent: #0D1020; /* text/icons on an accent (or danger) fill */
  --color-accent-subtle: #1E2645; /* selected row, active nav item / tab */
  --color-highlight: #7C93F2; /* the ONE primary next-step button per screen. Dark = accent blue, light = the road's sun yellow. Always with on-highlight text */
  --color-highlight-hover: #94A7F5;
  --color-on-highlight: #0D1020; /* text on a highlight fill (light: ink on the sun, 12:1) */
  --color-focus: #94A7F5; /* focus ring (2px ring, 2px offset); light = the road's sky blue */
  --color-success: #4CC38A; /* status: done / OK. Always with words */
  --color-success-bg: #12271D;
  --color-warning: #E8B04A; /* status: careful */
  --color-warning-bg: #2A2112;
  --color-danger: #F2726F; /* status: error / destructive ONLY */
  --color-danger-bg: #2E1717;
  --color-info: #5AA9E6; /* status: for your information */
  --color-info-bg: #132433;
  --color-backdrop: rgba(0, 0, 0, 0.4); /* dimmed page behind a modal (web) */
  --color-shadow-key: transparent; /* shadow colour: light mode, floating things only. Dark mode: no shadows */
  --color-shadow-ambient: transparent;

  /* space (4px base; nothing else allowed) */
  --space-0: 0px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;

  /* radius */
  --radius-none: 0px; /* table cells, edges touching the window */
  --radius-sm: 4px; /* tags, checkboxes, tooltips, menu items */
  --radius-md: 10px; /* inputs, selects, segmented controls, cards */
  --radius-lg: 14px; /* big cards, dialogs, pop-ups, menus, toasts */
  --radius-xl: 20px; /* panels, hero blocks */
  --radius-full: 9999px; /* EVERY button (pill), chips, badges, avatars, status dots */

  /* shadow: floating things only, light mode only (the shadow colours are transparent in dark) */
  --shadow-16: 0 0 2px var(--color-shadow-key), 0 8px 16px var(--color-shadow-ambient);
  --shadow-64: 0 0 8px var(--color-shadow-key), 0 32px 64px var(--color-shadow-ambient);
  --shadow-none: none;

  /* font */
  --font-family-sans: InterVariable, Inter, system-ui, 'Segoe UI Variable', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-display: 'Bricolage Grotesque', InterVariable, Inter, system-ui, sans-serif;
  --font-family-mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-display-size: 2.25rem;
  --font-display-line: 2.75rem;
  --font-display-weight: 800;
  --font-display-family: var(--font-family-display);
  --font-display-wdth: 88;
  --font-h1-size: 1.875rem;
  --font-h1-line: 2.25rem;
  --font-h1-weight: 800;
  --font-h1-family: var(--font-family-display);
  --font-h1-wdth: 88;
  --font-h2-size: 1.375rem;
  --font-h2-line: 1.75rem;
  --font-h2-weight: 700;
  --font-h2-family: var(--font-family-display);
  --font-h2-wdth: 92;
  --font-h3-size: 1.125rem;
  --font-h3-line: 1.625rem;
  --font-h3-weight: 600;
  --font-h3-family: var(--font-family-display);
  --font-h3-wdth: 100;
  --font-body-lg-size: 1rem;
  --font-body-lg-line: 1.5rem;
  --font-body-lg-weight: 400;
  --font-body-size: 0.875rem;
  --font-body-line: 1.25rem;
  --font-body-weight: 400;
  --font-label-size: 0.875rem;
  --font-label-line: 1.25rem;
  --font-label-weight: 500;
  --font-caption-size: 0.75rem;
  --font-caption-line: 1rem;
  --font-caption-weight: 400;

  /* motion */
  --dur-instant: 0ms;
  --dur-fast: 100ms;
  --dur-quick: 150ms;
  --dur-normal: 200ms;
  --dur-gentle: 250ms;
  --dur-slow: 300ms;
  --dur-slower: 400ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --ease-emphasized-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-emphasized-exit: cubic-bezier(0.3, 0, 0.8, 0.15);

  /* focus */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* control */
  --control-h-sm: 32px;
  --control-pad-sm: 12px;
  --control-h: 40px;
  --control-pad: 16px;
  --control-h-touch: 44px;
  --control-h-lg: 48px;
  --control-pad-lg: 20px;
  --control-desktop-h-sm: 28px;
  --control-desktop-pad-sm: 10px;
  --control-desktop-h: 32px;
  --control-desktop-pad: 12px;
  --control-desktop-h-lg: 40px;
  --control-desktop-pad-lg: 16px;
  --control-hit-min: 24px;
  --control-hit: 32px;
  --control-hit-touch: 44px;
  --control-row: 40px;
  --control-row-compact: 32px;
  --control-icon-sm: 16px;
  --control-icon: 20px;
  --control-icon-lg: 24px;

  /* layout */
  --layout-sidebar: 240px;
  --layout-rail: 56px;
  --layout-topbar: 48px;
  --layout-tabbar: 56px;
  --layout-inspector: 320px;
  --layout-drawer-sm: 320px;
  --layout-drawer-md: 592px;
  --layout-drawer-lg: 940px;
  --layout-content-max: 1280px;
  --layout-content-narrow: 720px;
  --layout-form-max: 560px;
  --layout-gutter: 24px;
  --layout-gutter-phone: 16px;
  --layout-margin-phone: 16px;
  --layout-margin: 24px;
  --layout-margin-wide: 32px;
  --layout-reading: 65ch;
}

/* theme switch: no attribute = dark (the kit default) */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="system"] { color-scheme: light dark; }

@supports (color: light-dark(#000, #fff)) {
  :root {
    --color-bg: light-dark(#F1F3EE, #111316);
    --color-surface: light-dark(#FFFFFF, #181A1F);
    --color-surface-2: light-dark(#E7ECE3, #202329);
    --color-border: light-dark(#DCE3D6, #2C3038);
    --color-border-strong: light-dark(#6F7E73, #6B7280);
    --color-border-raised: light-dark(#DCE3D6, rgba(255, 255, 255, 0.08));
    --color-text: light-dark(#14281D, #E8EAED);
    --color-text-muted: light-dark(#46564C, #A3A9B4);
    --color-text-subtle: light-dark(#56665B, #8B929E);
    --color-accent: light-dark(#236B34, #7C93F2);
    --color-accent-hover: light-dark(#1A5427, #94A7F5);
    --color-on-accent: light-dark(#FFFFFF, #0D1020);
    --color-accent-subtle: light-dark(#E3F0DC, #1E2645);
    --color-highlight: light-dark(#FFC928, #7C93F2);
    --color-highlight-hover: light-dark(#FFD54F, #94A7F5);
    --color-on-highlight: light-dark(#14281D, #0D1020);
    --color-focus: light-dark(#2F86C4, #94A7F5);
    --color-success: light-dark(#1E7A46, #4CC38A);
    --color-success-bg: light-dark(#E8F5EE, #12271D);
    --color-warning: light-dark(#8A5A00, #E8B04A);
    --color-warning-bg: light-dark(#FFF4D1, #2A2112);
    --color-danger: light-dark(#C2312F, #F2726F);
    --color-danger-bg: light-dark(#FDECEC, #2E1717);
    --color-info: light-dark(#24699C, #5AA9E6);
    --color-info-bg: light-dark(#E4F2FC, #132433);
    --color-backdrop: light-dark(rgba(20, 40, 29, 0.45), rgba(0, 0, 0, 0.4));
    --color-shadow-key: light-dark(rgba(20, 40, 29, 0.10), transparent);
    --color-shadow-ambient: light-dark(rgba(20, 40, 29, 0.14), transparent);
  }
}

/* browsers without light-dark(): light values by the switch (and the OS setting under "system") */
@supports not (color: light-dark(#000, #fff)) {
  :root[data-theme="light"] {
    --color-bg: #F1F3EE;
    --color-surface: #FFFFFF;
    --color-surface-2: #E7ECE3;
    --color-border: #DCE3D6;
    --color-border-strong: #6F7E73;
    --color-border-raised: #DCE3D6;
    --color-text: #14281D;
    --color-text-muted: #46564C;
    --color-text-subtle: #56665B;
    --color-accent: #236B34;
    --color-accent-hover: #1A5427;
    --color-on-accent: #FFFFFF;
    --color-accent-subtle: #E3F0DC;
    --color-highlight: #FFC928;
    --color-highlight-hover: #FFD54F;
    --color-on-highlight: #14281D;
    --color-focus: #2F86C4;
    --color-success: #1E7A46;
    --color-success-bg: #E8F5EE;
    --color-warning: #8A5A00;
    --color-warning-bg: #FFF4D1;
    --color-danger: #C2312F;
    --color-danger-bg: #FDECEC;
    --color-info: #24699C;
    --color-info-bg: #E4F2FC;
    --color-backdrop: rgba(20, 40, 29, 0.45);
    --color-shadow-key: rgba(20, 40, 29, 0.10);
    --color-shadow-ambient: rgba(20, 40, 29, 0.14);
  }
  @media (prefers-color-scheme: light) {
    :root[data-theme="system"] {
      --color-bg: #F1F3EE;
      --color-surface: #FFFFFF;
      --color-surface-2: #E7ECE3;
      --color-border: #DCE3D6;
      --color-border-strong: #6F7E73;
      --color-border-raised: #DCE3D6;
      --color-text: #14281D;
      --color-text-muted: #46564C;
      --color-text-subtle: #56665B;
      --color-accent: #236B34;
      --color-accent-hover: #1A5427;
      --color-on-accent: #FFFFFF;
      --color-accent-subtle: #E3F0DC;
      --color-highlight: #FFC928;
      --color-highlight-hover: #FFD54F;
      --color-on-highlight: #14281D;
      --color-focus: #2F86C4;
      --color-success: #1E7A46;
      --color-success-bg: #E8F5EE;
      --color-warning: #8A5A00;
      --color-warning-bg: #FFF4D1;
      --color-danger: #C2312F;
      --color-danger-bg: #FDECEC;
      --color-info: #24699C;
      --color-info-bg: #E4F2FC;
      --color-backdrop: rgba(20, 40, 29, 0.45);
      --color-shadow-key: rgba(20, 40, 29, 0.10);
      --color-shadow-ambient: rgba(20, 40, 29, 0.14);
    }
  }
}

/* reduced motion: durations drop to 0 under the OS setting or <html data-motion="off"> */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-quick: 0ms;
    --dur-normal: 0ms;
    --dur-gentle: 0ms;
    --dur-slow: 0ms;
    --dur-slower: 0ms;
  }
}
:root[data-motion="off"] {
  --dur-instant: 0ms;
  --dur-fast: 0ms;
  --dur-quick: 0ms;
  --dur-normal: 0ms;
  --dur-gentle: 0ms;
  --dur-slow: 0ms;
  --dur-slower: 0ms;
}