/**
 * Nyantal Health Design Tokens — CSS Custom Properties
 *
 * Drop-in stylesheet for any project that wants the Nyantal Health
 * brand system. Copy this file into your project and import it once,
 * then reference variables via `var(--color-brand)` etc.
 *
 * For Tailwind v4, paste the contents of the `@theme` block below
 * into your own globals.css.
 *
 * Version: 1.0.0
 * License: Proprietary — Nyantal Health Co., Ltd.
 */

:root {
  /* ===== Fonts ===== */
  --font-sans: "Plus Jakarta Sans", "Zen Maru Gothic", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", sans-serif;
  --font-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans",
    "Yu Gothic UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New",
    monospace;

  /* ===== Colors — Brand ===== */
  --color-brand: #1f4a3d;
  --color-brand-hover: #163529;
  --color-brand-subtle: #e8efe9;
  --color-brand-contrast: #ffffff;
  --color-accent: #c5873a;
  --color-accent-hover: #a36d26;
  --color-accent-subtle: #f5ecdb;
  --color-nyan: #e8b5a8;
  --color-nyan-subtle: #faf0ec;

  /* ===== Colors — Neutral ===== */
  --color-bg: #fbfaf7;
  --color-surface: #ffffff;
  --color-surface-alt: #f4f2ec;
  --color-border: #e7e3d8;
  --color-border-strong: #c9c3b2;
  --color-text: #1a1f1c;
  --color-text-muted: #5b6460;
  --color-text-subtle: #8a9189;

  /* ===== Colors — State ===== */
  --color-success: #2e7d5b;
  --color-success-subtle: #e4efe9;
  --color-warning: #b5761a;
  --color-warning-subtle: #f7ecd5;
  --color-danger: #a8362b;
  --color-danger-subtle: #f4dcd8;
  --color-info: #2f5d7c;
  --color-info-subtle: #e1ebf2;

  /* ===== Font sizes ===== */
  --font-size-hero: clamp(2.25rem, 5vw, 4rem);
  --font-size-h1: clamp(1.875rem, 4vw, 2.75rem);
  --font-size-h2: clamp(1.5rem, 3vw, 2rem);
  --font-size-h3: 1.25rem;
  --font-size-body-large: 1.125rem;
  --font-size-body: 1rem;
  --font-size-caption: 0.875rem;
  --font-size-label: 0.75rem;

  /* ===== Line heights ===== */
  --line-height-tight: 1.3;
  --line-height-snug: 1.4;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  --line-height-loose: 1.9; /* Japanese body */

  /* ===== Letter spacing ===== */
  --letter-spacing-hero: -0.02em;
  --letter-spacing-heading: -0.015em;
  --letter-spacing-tight: -0.01em;
  --letter-spacing-body: 0.02em;
  --letter-spacing-caption: 0.04em;
  --letter-spacing-label: 0.2em;

  /* ===== Spacing ===== */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-18: 4.5rem;
  --spacing-20: 5rem;
  --spacing-22: 5.5rem;
  --spacing-28: 7rem;
  --spacing-30: 7.5rem;
  --spacing-32: 8rem;
  --spacing-38: 9.5rem;

  /* ===== Max widths ===== */
  --max-width-narrow: 36rem;
  --max-width-prose: 42rem;
  --max-width-content: 76rem;
  --max-width-wide: 88rem;

  /* ===== Radius ===== */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ===== Shadows ===== */
  --shadow-xs: 0 1px 2px 0 rgb(26 31 28 / 0.04);
  --shadow-sm: 0 1px 3px 0 rgb(26 31 28 / 0.06), 0 1px 2px -1px rgb(26 31 28 / 0.04);
  --shadow-md: 0 4px 12px -2px rgb(26 31 28 / 0.08), 0 2px 4px -2px rgb(26 31 28 / 0.04);
  --shadow-lg: 0 12px 28px -8px rgb(26 31 28 / 0.12), 0 4px 10px -4px rgb(26 31 28 / 0.06);
  --shadow-xl: 0 24px 48px -12px rgb(26 31 28 / 0.16);

  /* ===== Motion ===== */
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);

  /* ===== Gradients ===== */
  --gradient-hero: radial-gradient(
    ellipse 80% 60% at 20% 10%,
    rgb(31 74 61 / 0.07) 0%,
    rgb(197 135 58 / 0.04) 40%,
    transparent 70%
  );
  --gradient-brand-soft: linear-gradient(135deg, rgb(31 74 61 / 0.05) 0%, rgb(31 74 61 / 0.09) 100%);
  --gradient-nyan-soft: linear-gradient(
    135deg,
    rgb(232 181 168 / 0.15) 0%,
    rgb(197 135 58 / 0.08) 100%
  );
}