/* GENERATED from design/tokens.json by design/generate-tokens.mjs — do not edit by hand. */
/* Otchi design tokens — iOS/mobile-first "Shop" system. Screens consume the semantic vars. */
:root {
  /* palette */
  --jay-blue: #2440c9;
  --jay-blue-soft: #b9c6f2;
  --jay-blue-deep: #1f38af;
  --pure-white: #ffffff;
  --ink-black: #000000;
  --near-black: #0d1317;
  --soft-canvas: #eef5f9;
  --hairline: #e6ecf0;
  --concrete: #c4ccd1;
  --slate: #697075;
  --system-red: #ff3b30;
  --system-red-deep: #d70015;
  /* palette (dark-only — referenced by the dark overrides below) */
  --elevated-dark: #191f23;
  --border-dark: #262d34;
  --light-slate: #989fa4;
  --muted-dark: #545b62;
  --system-red-dark: #ff453a;
  --system-red-bright-dark: #ff6961;
  --soft-canvas-dark: #242b32;
  --jay-blue-bright: #6ea8f5;
  /* semantic (use these) — light defaults; dark overrides at the end of the file */
  --canvas: var(--pure-white);
  --card: var(--pure-white);
  --border: var(--hairline);
  --border-emphasis: var(--ink-black);
  --text: var(--ink-black);
  --text-secondary: var(--slate);
  --text-muted: var(--concrete);
  --accent: var(--jay-blue);
  --accent-icon: var(--jay-blue);
  --on-accent: var(--pure-white);
  --destructive: var(--system-red);
  --destructive-text: var(--system-red-deep);
  --list-canvas: var(--soft-canvas);
  --list-border: var(--concrete);
  --surface-muted: var(--soft-canvas);
  /* spacing (4px base) */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  /* spacing roles — prefer these over --space-N (design/tokens.json ▸ spacingRole) */
  --space-inline: var(--space-4); /* Inside one element — label↔value, icon↔text, date↔'Edited'. */
  --space-related: var(--space-8); /* Siblings in one chunk — title↔body, thumbnail↔caption. */
  --space-group: var(--space-12); /* Adjacent blocks that belong together — memo section header↔list, row↔row in the memo list. */
  --space-block: var(--space-16); /* Default. Screen edge padding and the normal gap between blocks. */
  --space-section: var(--space-24); /* Between blocks of different character — content↔meta, content↔action. */
  --space-chapter: var(--space-32); /* Major divisions of a screen — content↔memo section. */
  /* radius */
  --radius-card: 8px;
  --radius-pill: 28px;
  /* type size */
  --text-caption: 11px;
  --text-body-sm: 12px;
  --text-body: 14px;
  --text-body-lg: 16px;
  --text-title: 22px;
  --text-display: 48px;
  --line-height: 1.33;
  /* elevation — the only sanctioned shadows (CSS blur = native radius * 2) */
  --elevation-brand-glow: 0 4px 24px rgba(31, 56, 175, 0.34);
  --elevation-lifted-card: 0 8px 32px rgba(0, 0, 0, 0.25);
  --elevation-action-button: 0 4px 16px rgba(0, 0, 0, 0.2);
  --elevation-scrim: rgba(0, 0, 0, 0.8);
}

/* dark mode — overrides the semantic vars only */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: var(--near-black);
    --card: var(--elevated-dark);
    --border: var(--border-dark);
    --border-emphasis: var(--pure-white);
    --text: var(--pure-white);
    --text-secondary: var(--light-slate);
    --text-muted: var(--muted-dark);
    --accent: var(--jay-blue);
    --accent-icon: var(--jay-blue-bright);
    --on-accent: var(--pure-white);
    --destructive: var(--system-red-dark);
    --destructive-text: var(--system-red-bright-dark);
    --list-canvas: var(--near-black);
    --list-border: var(--border-dark);
    --surface-muted: var(--soft-canvas-dark);
  }
}
:root[data-theme="dark"] {
  --canvas: var(--near-black);
  --card: var(--elevated-dark);
  --border: var(--border-dark);
  --border-emphasis: var(--pure-white);
  --text: var(--pure-white);
  --text-secondary: var(--light-slate);
  --text-muted: var(--muted-dark);
  --accent: var(--jay-blue);
  --accent-icon: var(--jay-blue-bright);
  --on-accent: var(--pure-white);
  --destructive: var(--system-red-dark);
  --destructive-text: var(--system-red-bright-dark);
  --list-canvas: var(--near-black);
  --list-border: var(--border-dark);
  --surface-muted: var(--soft-canvas-dark);
}