/* Hallmark · design-system tokens · CARESYS · source: design.md */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@600;700;800&family=Noto+Sans+JP:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Colors — OKLCH only, no hex */
  --color-paper:       oklch(97% 0.008 85);
  --color-paper-2:     oklch(94% 0.010 85);
  --color-paper-3:     oklch(90% 0.012 85);
  --color-ink:         oklch(22% 0.010 240);
  --color-ink-2:       oklch(42% 0.010 240);
  --color-ink-3:       oklch(62% 0.008 240);
  --color-rule:        oklch(85% 0.005 85);
  --color-rule-strong: oklch(70% 0.005 85);
  --color-accent:      oklch(52% 0.09 180);
  --color-accent-hover:oklch(44% 0.09 180);
  --color-accent-ink:  oklch(98% 0.005 85);
  --color-accent-soft: oklch(94% 0.020 180);
  --color-accent-warm: oklch(63% 0.13 45);
  --color-focus:       oklch(58% 0.15 240);
  --color-danger:      oklch(52% 0.18 25);
  --color-danger-soft: oklch(96% 0.020 25);

  /* Fonts */
  --font-display: "Shippori Mincho B1", "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-body:    "Noto Sans JP", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, "Menlo", monospace;

  /* Spacing — 4pt scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  /* Type scale */
  --text-display:   clamp(2.5rem, 5vw + 0.5rem, 4.25rem);
  --text-display-s: clamp(1.75rem, 3vw + 0.5rem, 2.75rem);
  --text-2xl: 1.75rem;
  --text-xl:  1.375rem;
  --text-lg:  1.125rem;
  --text-md:  1rem;
  --text-sm:  0.875rem;
  --text-xs:  0.75rem;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --dur-short: 180ms;
  --dur-med:   320ms;

  /* Radius */
  --radius-card:  4px;
  --radius-input: 4px;
  --radius-btn:   6px;

  /* Rules */
  --rule-hairline: 1px solid var(--color-rule);
  --rule-strong:   1px solid var(--color-rule-strong);
  --rule-accent:   2px solid var(--color-accent);

  /* Z scale */
  --z-nav:     10;
  --z-sticky:  20;
  --z-overlay: 100;
  --z-modal:   200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-short: 0ms;
    --dur-med:   150ms;
  }
}