/*
  ASDEV Design System — Tokens
  Source of truth: tokens.json (this file is the CSS mirror of that JSON).
  Extracted from asdev-studio/assets/site.css and formalized into a
  reusable, app-shell-ready token set. Do not hardcode colors/spacing
  in component or page CSS — reference these variables instead.
*/


:root {
  color-scheme: dark;

  /* ---------- Core brand palette ---------- */
  --asdev-ink: #0A1420;
  --asdev-navy: #102B49;
  --asdev-blue: #3B70C9;
  --asdev-steel: #7F9CAB;
  --asdev-ice: #DCE7EC;
  --asdev-paper: #F3F5F3;

  /* ---------- Semantic status colors ---------- */
  --asdev-success: #3E8B6E;
  --asdev-warning: #C98A3B;
  --asdev-danger: #B94A4A;
  --asdev-info: #3B70C9;

  /* ---------- Surface roles (dark, default) ---------- */
  --color-bg: var(--asdev-ink);
  --color-bg-soft: #0E1B2C;
  --color-surface: var(--asdev-navy);
  --color-surface-soft: #15304F;
  --color-border: rgba(127, 156, 171, 0.24);
  --color-border-strong: rgba(127, 156, 171, 0.4);
  --color-text: var(--asdev-paper);
  --color-text-muted: #9FB2BF;
  --color-accent: var(--asdev-blue);
  --color-accent-soft: rgba(59, 112, 201, 0.14);
  --color-accent-strong: #2A5599;
  --color-on-accent: #F3F5F3;

  /* ---------- Typography ---------- */
  --font-sans: "Hiragino Sans", "Yu Gothic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-en: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 16px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 30px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;
  --fs-display: clamp(40px, 8vw, 92px);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-base: 1.7;
  --lh-relaxed: 1.8;

  --ls-tight: -0.03em;
  --ls-snug: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-wider: 0.08em;
  --ls-widest: 0.16em;

  /* ---------- Spacing scale ---------- */
  --sp-0: 0px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ---------- Radius scale ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- Shadow scale ---------- */
  --shadow-sm: 0 2px 8px -4px rgba(10, 20, 32, 0.35);
  --shadow-md: 0 12px 24px -12px rgba(10, 20, 32, 0.45);
  --shadow-lg: 0 20px 40px -20px rgba(10, 20, 32, 0.55);

  /* ---------- Motion ---------- */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --dur-reveal: 900ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Layout ---------- */
  --layout-max-width: 1120px;
  --layout-sidebar-width: 240px;
  --layout-header-h-desktop: 88px;
  --layout-header-h-mobile: 64px;
  --layout-bottom-nav-h: 64px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
  }
}

/* ---------- Product theme overrides ---------- */
/* Swap only the accent triad; core surfaces stay identical across products. */
[data-product="subscription-watcher"] {
  --color-accent: #3B70C9;
  --color-accent-soft: rgba(59, 112, 201, 0.14);
  --color-accent-strong: #2A5599;
}
[data-product="wariko"] {
  --color-accent: #2E7E96;
  --color-accent-soft: rgba(46, 126, 150, 0.14);
  --color-accent-strong: #215E70;
}
[data-product="roomtone"] {
  --color-accent: #7F9CAB;
  --color-accent-soft: rgba(127, 156, 171, 0.16);
  --color-accent-strong: #5E7A8C;
}
[data-product="recipe-log"] {
  --color-accent: #6E7FC9;
  --color-accent-soft: rgba(110, 127, 201, 0.14);
  --color-accent-strong: #4F5FA8;
}

/* ---------- Light surface utility ---------- */
/* Used for cards/panels that intentionally sit on a light (Paper/Ice) surface
   inside an otherwise dark app shell — mirrors the site's alabaster panels. */
.asdev-on-light {
  color-scheme: light;
  --color-bg: var(--asdev-paper);
  --color-bg-soft: #EAEEEE;
  --color-surface: #FFFFFF;
  --color-surface-soft: var(--asdev-ice);
  --color-border: rgba(10, 20, 32, 0.12);
  --color-border-strong: rgba(10, 20, 32, 0.24);
  --color-text: var(--asdev-ink);
  --color-text-muted: #3D5266;
  --color-on-accent: #FFFFFF;
}