/**
 * REIBOVAX — Design tokens
 * Clean lifestyle tech — bright / airy vs dark tech sites
 * Prefix: --ys-
 */

:root {
  color-scheme: light;

  /* ——— Palette (soft paper · ink · lifestyle teal) ——— */
  --ys-mist: #f3f6f4;
  --ys-mist-deep: #e6ece8;
  --ys-paper: #fafcfb;
  --ys-paper-warm: #f5f8f6;
  --ys-ink: #1a2420;
  --ys-ink-soft: #5c6b64;
  --ys-ink-deep: #121a17;
  --ys-sage: #2d7a62;
  --ys-sage-deep: #246352;
  --ys-sage-soft: #3d9a7a;
  --ys-moss: #2d7a62;
  --ys-fog: #e8eeea;
  --ys-white: #ffffff;
  --ys-cream: #f7faf8;

  --ys-line: rgba(26, 36, 32, 0.1);
  --ys-line-strong: rgba(26, 36, 32, 0.16);
  --ys-line-soft: rgba(26, 36, 32, 0.06);
  --ys-overlay: rgba(18, 26, 23, 0.35);
  --ys-overlay-deep: rgba(18, 26, 23, 0.55);
  --ys-ink-muted: rgba(26, 36, 32, 0.68);

  /* Semantic */
  --ys-bg: #fafcfb;
  --ys-bg-alt: #f3f6f4;
  --ys-bg-warm: #f5f8f6;
  --ys-bg-soft: #ffffff;
  --ys-text: #1a2420;
  --ys-text-muted: #5c6b64;
  --ys-text-soft: #3d9a7a;
  --ys-text-inverse: #fafcfb;
  --ys-accent: #2d7a62;
  --ys-accent-deep: #246352;
  --ys-accent-soft: #3d9a7a;
  --ys-border: var(--ys-line);
  --ys-border-strong: var(--ys-line-strong);
  --ys-surface: #ffffff;
  --ys-focus: #2d7a62;

  /* Primary button */
  --ys-btn-primary: #2d7a62;
  --ys-btn-primary-hover: #35906f;
  --ys-btn-primary-text: #f7faf8;
  --ys-btn-primary-shadow: 0 8px 24px rgba(45, 122, 98, 0.22);

  /* ——— Typography ——— */
  --font-display: "Syne", "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-jp: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Helvetica Neue", sans-serif;

  --ys-fs-2xs: 0.625rem;
  --ys-fs-xs: 0.6875rem;
  --ys-fs-sm: 0.8125rem;
  --ys-fs-base: 1rem;
  --ys-fs-md: 1.0625rem;
  --ys-fs-lg: 1.1875rem;
  --ys-fs-xl: 1.375rem;
  --ys-fs-2xl: clamp(1.5rem, 2.4vw, 1.875rem);
  --ys-fs-3xl: clamp(1.85rem, 3.5vw, 2.65rem);
  --ys-fs-4xl: clamp(2.15rem, 4.8vw, 3.35rem);
  --ys-fs-5xl: clamp(2.55rem, 6vw, 4.25rem);
  --ys-fs-display: clamp(2.55rem, 6.8vw, 5rem);

  --ys-lh-tight: 1.2;
  --ys-lh-snug: 1.45;
  --ys-lh-base: 1.85;
  --ys-lh-loose: 2;

  --ys-track-tight: -0.02em;
  --ys-track-base: 0;
  --ys-track-wide: 0.14em;
  --ys-track-label: 0.18em;
  --ys-track-brand: 0.28em;

  --ys-fw-light: 300;
  --ys-fw-regular: 400;
  --ys-fw-medium: 500;
  --ys-fw-semibold: 600;
  --ys-fw-bold: 700;

  /* ——— Spacing ——— */
  --ys-space-3xs: 0.125rem;
  --ys-space-2xs: 0.25rem;
  --ys-space-xs: 0.5rem;
  --ys-space-sm: 0.75rem;
  --ys-space-md: 1rem;
  --ys-space-lg: 1.5rem;
  --ys-space-xl: 2rem;
  --ys-space-2xl: 3rem;
  --ys-space-3xl: 4.5rem;
  --ys-space-4xl: 6.5rem;
  --ys-space-5xl: 8.5rem;

  --ys-section-y: clamp(3rem, 6.5vw, 5.25rem);
  --ys-section-y-sm: clamp(2.25rem, 5vw, 3.75rem);

  /* ——— Layout ——— */
  --ys-container: 80rem;
  --ys-container-narrow: 46rem;
  --ys-container-wide: 92rem;
  --ys-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --ys-header-h: 4.25rem;

  /* ——— Radius & shadow ——— */
  --ys-radius-sm: 2px;
  --ys-radius: 6px;
  --ys-radius-lg: 12px;
  --ys-shadow-soft: 0 12px 36px rgba(26, 36, 32, 0.08);
  --ys-shadow-lift: 0 18px 44px rgba(26, 36, 32, 0.1);

  /* ——— Motion ——— */
  --ys-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ys-duration: 0.45s;
  --ys-duration-slow: 0.8s;

  /* ——— Header ——— */
  --ys-header-bg: rgba(250, 252, 251, 0.78);
  --ys-header-bg-solid: rgba(250, 252, 251, 0.96);

  /* ——— Dark stage (home hero) ——— */
  --ys-stage-bg: #0c0d12;
  --ys-stage-bg-mid: #12131a;
  --ys-stage-surface: #161822;
  --ys-stage-text: #e8eaf2;
  --ys-stage-muted: #9aa0b4;
  --ys-stage-cyan: #5ce1e6;
  --ys-stage-violet: #8b7cf6;
  --ys-stage-glow: rgba(92, 225, 230, 0.28);
  --ys-stage-glow-violet: rgba(139, 124, 246, 0.22);
  --ys-stage-line: rgba(232, 234, 242, 0.12);
  --ys-stage-line-strong: rgba(92, 225, 230, 0.45);
}

/* Home: slight dark cohesion under stage hero */
body.ys-home {
  --ys-bg: #0e0f14;
  --ys-bg-alt: #14151c;
  --ys-bg-warm: #12131a;
  --ys-bg-soft: #161822;
  --ys-text: #e8eaf2;
  --ys-text-muted: #9aa0b4;
  --ys-text-soft: #5ce1e6;
  --ys-surface: #161822;
  --ys-line: rgba(232, 234, 242, 0.1);
  --ys-line-strong: rgba(232, 234, 242, 0.16);
  --ys-line-soft: rgba(232, 234, 242, 0.06);
  --ys-header-bg: rgba(12, 13, 18, 0.72);
  --ys-header-bg-solid: rgba(12, 13, 18, 0.94);
  --ys-accent: #5ce1e6;
  --ys-accent-deep: #3ec4c9;
  --ys-accent-soft: #8b7cf6;
  --ys-sage: #5ce1e6;
  --ys-sage-deep: #3ec4c9;
  --ys-sage-soft: #8b7cf6;
  --ys-btn-primary: #5ce1e6;
  --ys-btn-primary-hover: #7aebef;
  --ys-btn-primary-text: #0c0d12;
  --ys-btn-primary-shadow: 0 8px 28px rgba(92, 225, 230, 0.28);
  --ys-shadow-soft: 0 12px 36px rgba(0, 0, 0, 0.35);
  --ys-mist: #161822;
  --ys-mist-deep: #1c1e2a;
  color-scheme: dark;
  background: var(--ys-bg);
  color: var(--ys-text);
}