/* ============================================================
   Uravation Design Tokens — studio-lp-btobsaas prototype
   Source of truth: claude-design/DESIGN.md (Uravation teal family)
   ============================================================ */
:root {
  /* Ink / text */
  --ink: #0B1220;
  --ink-2: #1C2A3A;
  --ink-3: #2D3E50;
  --color-text: #0B1220;
  --color-text-2: #2D3E50;
  --color-text-light: #475569;
  --color-text-muted: #5b6b7e;
  --color-text-white: #ffffff;

  /* Surfaces */
  --color-bg: #F6F8FB;
  --color-surface: #FFFFFF;
  --color-bg-alt: #EDF1F7;
  --color-bg-dark: #0B1220;

  /* Accent — Uravation teal family */
  --accent: #007a8a;
  --accent-soft: #7DD3FC;
  --accent-dark: #006064;
  --accent-deep: #004d57;
  --accent-light: #b2ebf2;
  --accent-bg: rgba(0, 122, 138, 0.05);
  --accent-bg-strong: rgba(0, 122, 138, 0.1);

  /* Borders */
  --color-border: rgba(15, 23, 42, 0.08);
  --hairline: 1px solid rgba(15, 23, 42, 0.08);
  --hairline-strong: 2px solid rgba(15, 23, 42, 0.85);
  --hairline-light: 1px solid rgba(255, 255, 255, 0.2);

  /* Gradients (SaaS LP: teal sweep instead of ref's blue) */
  --gradient-cta: linear-gradient(120deg, #004d57 0%, #007a8a 55%, #0a9bb0 100%);
  --gradient-hero-ribbon: linear-gradient(135deg, rgba(0, 122, 138, 0.1) 0%, rgba(178, 235, 242, 0.28) 100%);
  --gradient-card-cta: linear-gradient(135deg, #006064 0%, #0a9bb0 100%);

  /* Typography (BtoB SaaS: gothic) */
  --font-en: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ja: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN',
             'Hiragino Sans', Meiryo, sans-serif;

  /* Spacing (8px grid) */
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.2rem;
  --space-4: 1.6rem;
  --space-5: 2rem;
  --space-6: 2.4rem;
  --space-8: 3.2rem;
  --space-10: 4rem;
  --space-12: 4.8rem;
  --space-16: 6.4rem;
  --space-20: 8rem;
  --section-padding: 10rem;
  --section-padding-sp: 6.4rem;

  /* Radius (ref: big rounded panels) */
  --radius-sm: 10px;
  --radius-card: 16px;
  --radius-panel: 40px;
  --radius-btn: 50px;

  /* Shadows */
  --shadow-card: 0 4px 24px rgba(11, 18, 32, 0.08);
  --shadow-card-hover: 0 20px 60px rgba(0, 122, 138, 0.15), 0 8px 24px rgba(11, 18, 32, 0.12);
  --shadow-btn: 0 8px 30px rgba(0, 122, 138, 0.25);
  --shadow-float: 0 18px 48px rgba(0, 77, 87, 0.32);

  /* Motion */
  --transition-fast: 0.15s cubic-bezier(0.2, 0.6, 0, 1);
  --transition-base: 0.25s cubic-bezier(0.2, 0.6, 0, 1);
  --transition-slow: 0.5s cubic-bezier(0.2, 0.6, 0, 1);
  --transition-reveal: 0.9s cubic-bezier(0.2, 0.6, 0, 1);

  /* Layout */
  --max-width: 1200px;
  --header-height: 80px;
  --header-height-sp: 64px;
}