/* ─────────────────────────────────────────────────────────────────────────────
   kotsu · tokens.css · v1.0 · FINAL (identical to v0.3 — version marks stability for the website build)
   GENERATED FROM tokens/design-tokens.json — DO NOT EDIT BY HAND.
   Regenerate:  style-dictionary build
   Light is :root; Dusk applies via [data-theme="dusk"] OR system preference.
   PRODUCT SPEC: Dusk auto-switches at local sunset with a user toggle-off —
   app logic owns the sunset switch; prefers-color-scheme is the web fallback.
   v0.2: lake replaces sky's interactive roles (sky = scenery only);
   plum replaces wisteria (deprecated, kept for compat); muted/secondary text
   darkened one step for AA; focus ring strengthened; line-heights are ratios.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* — layer 1 · primitive ramps — */
  --lake-50:#E9F5F8; --lake-100:#D2EBF1; --lake-200:#A9D9E4; --lake-300:#79C2D3;
  --lake-400:#45A5BD; --lake-500:#2E97B4; --lake-600:#20809B; --lake-700:#196378;
  --lake-800:#174F60; --lake-900:#143F4D; --lake-950:#0F2831;
  /* sky — RETIRED TO SCENERY (scenes, heroes, gradients). Never interactive. */
  --sky-50:#EEF7FD; --sky-100:#D4EBFA; --sky-200:#AFD8F4; --sky-300:#82C2EC;
  --sky-400:#54A8E1; --sky-500:#2E8BD4; --sky-600:#1F73B8; --sky-700:#1A5C93;
  --sky-800:#194B73; --sky-900:#173D5C; --sky-950:#102942;
  --honey-50:#FFF9EC; --honey-100:#FCEFD0; --honey-200:#F9DFA0; --honey-300:#F6CD70;
  --honey-400:#F4BE4E; --honey-500:#F2B43C; --honey-600:#D9971F; --honey-700:#B26F12;
  --honey-800:#8A540D; --honey-900:#5C3A04;
  --meadow-50:#EFF8F0; --meadow-100:#DCF0DE; --meadow-200:#BCE3C0; --meadow-300:#94D29B;
  --meadow-400:#74C27E; --meadow-500:#5CB06A; --meadow-600:#45934F; --meadow-700:#2F7A45;
  --meadow-800:#245F38; --meadow-900:#1A4528;
  --plum-50:#F7F1F9; --plum-100:#F0E7F5; --plum-200:#E0CEE9; --plum-300:#C9ABD8;
  --plum-400:#B28BC5; --plum-500:#9A6AAE; --plum-600:#82539A; --plum-700:#6E4680;
  --plum-800:#573866; --plum-900:#402A4B;
  /* wisteria — DEPRECATED v0.2 (use plum). Kept: deprecate, never delete. */
  --wisteria-50:#F1F1FA; --wisteria-100:#E4E5F4; --wisteria-200:#CBCDEA; --wisteria-300:#ADB1DC;
  --wisteria-400:#9499CF; --wisteria-500:#7C82C4; --wisteria-600:#6066A6; --wisteria-700:#4C5187;
  --wisteria-800:#3D4169; --wisteria-900:#2C2F4C;
  --coral-50:#FDF1EB; --coral-100:#FCE2DA; --coral-200:#F8C4B4; --coral-300:#F5A48B;
  --coral-400:#F38C6F; --coral-500:#F2856B; --coral-600:#DC6A4F; --coral-700:#B84A33;
  --coral-800:#9A4220; --coral-900:#6E2E16;
  --warm-0:#FFFDF8; --warm-50:#FBF6EC; --warm-100:#F4ECDD; --warm-200:#E9DEC9;
  --warm-300:#D3C4A8; --warm-400:#B0A48F; --warm-500:#9A8F7E; --warm-600:#6B6357;
  --warm-700:#4A453C; --warm-800:#38332B; --warm-900:#26221C;
  /* warm-500 is NO LONGER a text colour (fails AA on cream) — decorative/disabled only */

  /* — layer 2 · semantic roles (LIGHT) · edit here — */
  --c-bg:var(--warm-50); --c-surface:var(--warm-0); --c-surface-sunken:var(--warm-100);
  --c-border:var(--warm-200);
  --c-text-primary:var(--warm-800); --c-text-secondary:var(--warm-700); --c-text-muted:var(--warm-600);
  --c-brand:var(--lake-500);
  --c-action:var(--lake-600); --c-action-hover:var(--lake-700); --c-action-pressed:var(--lake-800);
  --c-action-on:var(--warm-0); --c-link:var(--lake-700);
  --c-focus-ring:rgba(32,128,155,.45); /* v0.2: raised from .30 — clears 3:1 non-text */
  /* the End-session control — neutral sand secondary; coral = destructive only */
  --c-neutral-secondary-bg:var(--warm-100); --c-neutral-secondary-border:#E0D4BF; --c-neutral-secondary-text:var(--warm-600);
  --c-reward-tint:var(--honey-100); --c-reward:var(--honey-500); --c-reward-text:var(--honey-700);
  --c-success-tint:var(--meadow-100); --c-success:var(--meadow-500); --c-success-text:var(--meadow-700);
  --c-social-tint:var(--plum-100); --c-social:var(--plum-500); --c-social-solid:var(--plum-600); --c-social-text:var(--plum-700);
  --c-error-tint:var(--coral-50); --c-error:var(--coral-500); --c-error-solid:var(--coral-600); --c-error-text:var(--coral-700);
  --c-radiance:var(--honey-300); --c-radiance-haze:rgba(242,180,60,.55);

  /* — type — */
  --font-display:"Baloo 2", "Zen Maru Gothic", system-ui, sans-serif;
  --font-body:"Nunito", "Zen Maru Gothic", system-ui, sans-serif;
  --font-accent:"Fraunces", Georgia, serif;
  /* Zen Maru ships as a text-SUBSET (こつこつ); in-app the word is an SVG asset */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;
  --fs-display:40px; --fs-h1:32px; --fs-h2:26px; --fs-h3:21px;
  --fs-body-lg:18px; --fs-body:16px; --fs-label:14px; --fs-caption:13px;
  /* marketing hero sizes — WEB ONLY, fluid/mobile-first (app never uses these) */
  --fs-mkt-xl:clamp(2.5rem, 6vw, 4.5rem); --fs-mkt-lg:clamp(2rem, 5vw, 3.5rem); --fs-mkt-md:clamp(1.625rem, 4vw, 2.75rem);
  /* v0.2: line-heights are RATIOS (dynamic-type safe), not px */
  --lh-display:1.1; --lh-h1:1.2; --lh-h2:1.25; --lh-h3:1.35;
  --lh-body-lg:1.55; --lh-body:1.5; --lh-label:1.15; --lh-caption:1.25;

  /* — space (4-pt) — */
  --space-xs:4px; --space-sm:8px; --space-md:12px; --space-lg:16px;
  --space-xl:24px; --space-2xl:32px; --space-3xl:48px; --space-4xl:64px;

  /* — radius — */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:22px;
  --radius-2xl:28px; --radius-pill:999px;

  /* — shadow (low, warm-tinted) · v0.2 density rule: canvas (flat) / hairline
       (lists) / card (md — grouped tappable + sheets). ONE shadow level per
       screen; a lone button never gets a card. — */
  --shadow-sm:0 1px 2px rgba(56,51,43,.07);
  --shadow-md:0 4px 16px rgba(56,51,43,.09);
  --shadow-lg:0 12px 32px rgba(56,51,43,.12);

  /* — motion (breathing pace, no overshoot — ONE exemption: the celebration
       bounce, stage-up/first-win only, ≤2 bounces, in place) — */
  --dur-quick:180ms; --dur-base:280ms; --dur-calm:480ms; --dur-pollen:1500ms;
  --dur-breathe:3000ms; --dur-rest:5000ms; --dur-burst:1000ms; /* burst = BONDED only, once ever per pet */
  --ease-standard:cubic-bezier(.22,.61,.36,1);
  --ease-idle:cubic-bezier(.45,0,.55,1);

  /* — web marketing grid · mobile-first (1 column by default; grid engages at md+) — */
  --layout-max:1200px; --layout-columns:12; --layout-gutter:24px;
  --layout-margin:20px; /* page side margin on mobile */

  /* — a11y — */
  --tap-target-min:44px; --focus-ring-width:4px;

  /* — share card (F17) · geometry is law — */
  --card-story-w:1080px; --card-story-h:1920px; --card-story-safe:96px;
  --card-square-w:1080px; --card-square-h:1080px; --card-square-safe:72px;

  /* — pet · tint slot RESERVED (values set with artist; keep clear of lake/meadow/coral) — */
  --pet-tint-1:initial; --pet-tint-2:initial; --pet-tint-3:initial; --pet-tint-4:initial;
  --pet-tint-5:initial; --pet-tint-6:initial; --pet-tint-7:initial; --pet-tint-8:initial;
  /* pet state motion: idle=breathe · walking=in-session loop · celebrating=pollen · radiant=breathe+glow · dormant=rest */

  /* — breakpoints · MOBILE-FIRST (min-width, scale up) — sm 480 · md 768 · lg 1024 · xl 1280 — */
  /* desktop page margin bumps to 32px at md+ */
}

/* — DUSK · manual opt-in (product spec: auto at sunset + user toggle; app logic owns it) — */
[data-theme="dusk"] {
  --c-bg:#141F33; --c-surface:#1C2A42; --c-surface-sunken:#141F33; --c-border:#324563;
  --c-text-primary:#ECF1F8; --c-text-secondary:#B3C1D6; --c-text-muted:#8295AE;
  --c-brand:var(--lake-400);
  --c-action:var(--lake-400); --c-action-hover:var(--lake-300); --c-action-pressed:var(--lake-200);
  --c-action-on:var(--lake-950); --c-link:var(--lake-300);
  --c-focus-ring:rgba(69,165,189,.45);
  --c-neutral-secondary-bg:#24344F; --c-neutral-secondary-border:#324563; --c-neutral-secondary-text:#B3C1D6;
  --c-reward-tint:rgba(242,180,60,.18); --c-reward:var(--honey-400); --c-reward-text:var(--honey-300);
  --c-success-tint:rgba(92,176,106,.20); --c-success:var(--meadow-400); --c-success-text:var(--meadow-300);
  --c-social-tint:rgba(154,106,174,.26); --c-social:var(--plum-400); --c-social-solid:var(--plum-500); --c-social-text:var(--plum-300);
  --c-error-tint:rgba(242,133,107,.18); --c-error:var(--coral-400); --c-error-solid:var(--coral-500); --c-error-text:var(--coral-300);
  --c-radiance:var(--honey-300); --c-radiance-haze:rgba(246,205,112,.50);
}

/* — DUSK · follow the OS when no explicit choice is set (web fallback until sunset logic exists) — */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg:#141F33; --c-surface:#1C2A42; --c-surface-sunken:#141F33; --c-border:#324563;
    --c-text-primary:#ECF1F8; --c-text-secondary:#B3C1D6; --c-text-muted:#8295AE;
    --c-brand:var(--lake-400);
    --c-action:var(--lake-400); --c-action-hover:var(--lake-300); --c-action-pressed:var(--lake-200);
    --c-action-on:var(--lake-950); --c-link:var(--lake-300);
    --c-focus-ring:rgba(69,165,189,.45);
    --c-neutral-secondary-bg:#24344F; --c-neutral-secondary-border:#324563; --c-neutral-secondary-text:#B3C1D6;
    --c-reward-tint:rgba(242,180,60,.18); --c-reward:var(--honey-400); --c-reward-text:var(--honey-300);
    --c-success-tint:rgba(92,176,106,.20); --c-success:var(--meadow-400); --c-success-text:var(--meadow-300);
    --c-social-tint:rgba(154,106,174,.26); --c-social:var(--plum-400); --c-social-solid:var(--plum-500); --c-social-text:var(--plum-300);
    --c-error-tint:rgba(242,133,107,.18); --c-error:var(--coral-400); --c-error-solid:var(--coral-500); --c-error-text:var(--coral-300);
    --c-radiance:var(--honey-300); --c-radiance-haze:rgba(246,205,112,.50);
  }
}

/* — a11y · honor reduced motion everywhere (calming app: this matters) — */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-quick:0ms; --dur-base:0ms; --dur-calm:0ms; --dur-pollen:0ms; --dur-breathe:0ms; --dur-rest:0ms; --dur-burst:0ms; }
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* — brand · wordmark (v0.3 — lockup geometry is law) —
   lowercase 'kotsu', Baloo 2 SemiBold; the honey dot is the ONLY colored
   element — never recolors, never alone. Flat fills, no gradients, ever. */
:root {
  --brand-word-color:var(--warm-800); --brand-word-color-dusk:var(--warm-0);
  --brand-dot-color:var(--honey-500); /* identical in both modes */
  --brand-dot-ratio:0.25;  /* dot diameter = word size ÷ 4 */
  --brand-gap-ratio:0.09;  /* word→dot gap ≈ word size ÷ 11 */
  --brand-clear-space:1em; /* ≈ one dot diameter each side at dot-ratio 0.25 × 4 */
  --brand-min-size-digital:88px; /* below this the dot drops · print min 20mm */
}