/* Hachi design tokens — Quiet Pack. Import once at the app root. Theme: <html data-theme="light|dark">; without the attribute it follows the OS. */

/* Site copy: fonts are self-hosted, see the @font-face rules in site.css. */



:root, [data-theme="light"] {
  color-scheme: light;
  --surface: #FBF8F2;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F3EEE4;
  --line: #E5DDCF;
  --line-strong: #8E8478;
  --ink: #1D1A16;
  --ink-muted: #645C51;
  --hachi: #E08A3E;
  --on-hachi: #2A1A10;
  --hachi-soft: #FCE4CF;
  --hachi-ink: #9A4710;
  --focus: #9A4710;
  --success: #1B7282;
  --danger: #B8361F;
  --mascot-ink: #3B2414;
  --muzzle: #FFF4E4;
  --icon-ground: #3E7D77;
  --coat-akita: #E08A3E;
  --coat-cream: #FCEBD0;
  --coat-sesame: #C9A27C;
  --coat-cocoa: #A8714C;
  --coat-sky: #9CC7EE;
  --coat-mint: #93D8C2;
  --coat-plum: #C7AEEB;
  --coat-coral: #F5A48C;
  --shadow-lift: 0 1px 2px rgba(29,26,22,0.06), 0 8px 24px rgba(29,26,22,0.08);
}

[data-theme="dark"] {
  color-scheme: dark;
  --surface: #151311;
  --surface-raised: #1F1C19;
  --surface-sunken: #0F0D0B;
  --line: #322D27;
  --line-strong: #7D756A;
  --ink: #F6F1E8;
  --ink-muted: #ABA294;
  --hachi: #EC9A52;
  --on-hachi: #2A1A10;
  --hachi-soft: #3E2716;
  --hachi-ink: #FFB27A;
  --focus: #FFB27A;
  --success: #5CC8D6;
  --danger: #FF8A70;
  --mascot-ink: #3B2414;
  --muzzle: #FFF4E4;
  --icon-ground: #3E7D77;
  --coat-akita: #E08A3E;
  --coat-cream: #FCEBD0;
  --coat-sesame: #C9A27C;
  --coat-cocoa: #A8714C;
  --coat-sky: #9CC7EE;
  --coat-mint: #93D8C2;
  --coat-plum: #C7AEEB;
  --coat-coral: #F5A48C;
  --shadow-lift: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --surface: #151311;
    --surface-raised: #1F1C19;
    --surface-sunken: #0F0D0B;
    --line: #322D27;
    --line-strong: #7D756A;
    --ink: #F6F1E8;
    --ink-muted: #ABA294;
    --hachi: #EC9A52;
    --on-hachi: #2A1A10;
    --hachi-soft: #3E2716;
    --hachi-ink: #FFB27A;
    --focus: #FFB27A;
    --success: #5CC8D6;
    --danger: #FF8A70;
    --mascot-ink: #3B2414;
    --muzzle: #FFF4E4;
    --icon-ground: #3E7D77;
    --coat-akita: #E08A3E;
    --coat-cream: #FCEBD0;
    --coat-sesame: #C9A27C;
    --coat-cocoa: #A8714C;
    --coat-sky: #9CC7EE;
    --coat-mint: #93D8C2;
    --coat-plum: #C7AEEB;
    --coat-coral: #F5A48C;
    --shadow-lift: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35);
  }
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --font-display: "Figtree", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --duration-press: 120ms;
  --duration-quick: 200ms;
  --duration-panel: 320ms;
  --ease-ui: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34,1.4,.64,1);
  --loop-breathe: 4s;
  --loop-blink: 5.2s;
  --loop-ear-flick: 1.8s;
}

.display-xl { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -0.02em; }

.display { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.015em; }

.title { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 650; letter-spacing: -0.01em; }

.headline { font-family: var(--font-text); font-size: 19px; line-height: 26px; font-weight: 700; letter-spacing: 0.005em; }

.body { font-family: var(--font-text); font-size: 17px; line-height: 26px; font-weight: 400; letter-spacing: 0.01em; }

.label { font-family: var(--font-text); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: 0.01em; }

.callout { font-family: var(--font-text); font-size: 15px; line-height: 22px; font-weight: 400; letter-spacing: 0.01em; }

.caption { font-family: var(--font-text); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0.02em; }

.mono { font-family: var(--font-mono); font-size: 14px; line-height: 22px; font-weight: 400; }