/* ==========================================================================
   InkJar design tokens — GENERATED FILE, DO NOT EDIT BY HAND.
   Source: Design-System/tokens.json   Build: python3 Design-System/build.py
   Editing this file directly will be silently overwritten on the next build.
   ========================================================================== */

:root {
  --color-surface: #FFFFFF;
  --color-surface-raised: #F3F4F8;
  --color-surface-chip: #EEF2FB;
  --color-text-primary: #000000;
  --color-text-muted: #566275;
  --color-text-subtle: #8F9BB3;
  --color-border: #E7E7EA;
  --color-accent: #0B65FF;
  --color-accent-hover: #0956D9;
  --color-accent-warm: #ED745F;
  --state-success: #12805C;
  --state-success-soft: #DDF1E9;
  --state-error: #D92D20;
  --state-error-soft: #FEE6E4;
  --state-warning: #B54708;
  --state-empty: #98A2B3;

  --ink-skin-white-fill: #FFA899;
  --ink-skin-white-line: #ED745F;
  --ink-skin-brown-fill: #C68667;
  --ink-skin-brown-line: #A55F41;
  --ink-skin-black-fill: #825546;
  --ink-skin-black-line: #5F3728;
  --ink-hair-black: #1E1412;
  --ink-hair-dark-brown: #4D3936;
  --ink-hair-light-brown: #9C735A;
  --ink-hair-red: #B43C28;
  --ink-hair-golden: #D2AA50;
  --ink-hair-blonde: #E6C882;
  --ink-hair-gray: #A0A0A0;
  --ink-hair-stubble: rgba(15, 9, 8, 0.30);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 120px;
  --stroke-hairline: 1px;
  --stroke-regular: 2px;
  --stroke-thick: 4px;
  --font-display: "Bricolage Grotesque", Figtree, sans-serif;
  --font-body: Figtree, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  /* compatibility aliases for css/styles.css — see build.py */
  --color-bg: var(--color-surface);
  --color-text: var(--color-text-primary);
  --color-text-muted: #6B7280;
  --color-dark-bg: #18191D;
  --color-dark-text: #FFFFFF;
  --color-dark-text-muted: rgba(255, 255, 255, 0.7);
  --color-error: var(--state-error);
  --color-success: var(--state-success);
  --container-width: 1200px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

[data-theme="dark"] {
  --color-surface: #0B0E17;
  --color-surface-raised: #141724;
  --color-surface-chip: #212B49;
  --color-text-primary: #FFFFFF;
  --color-text-muted: #8F9BB3;
  --color-text-subtle: #566275;
  --color-border: #202538;
  --color-accent: #3B82F6;
  --color-accent-hover: #60A5FA;
  --color-accent-warm: #ED745F;
  --state-success: #34A47B;
  --state-success-soft: #10382A;
  --state-error: #F87171;
  --state-error-soft: #461713;
  --state-warning: #FBBF24;
  --state-empty: #475467;
}

/* Dark mode is OPT-IN via data-theme="dark" on a container. There is
   deliberately no prefers-color-scheme block: inkjar.in is a light-only site
   today, and auto-switching it would flip the live page for every visitor
   whose OS is set to dark. Add the media query when the site is designed
   for dark, not before. */