/* ==========================================================
   MetaCreative Design Tokens — "Atelier Morning"
   Source: DESIGN_LANGUAGE.md + rich-boilerplate.html :root
   ========================================================== */

:root {
  /* Light "Atelier Morning" */
  --base: #F5F0E8;
  --surface: #FAF8F5;
  --white: #FDFCFA;
  --text-primary: #2C3330;
  --text-secondary: #6B6560;
  --text-muted: #9E9690;
  --border: #E5DFD6;

  /* Core Colors — Sage */
  --sage-50: #F4F6F2;
  --sage-100: #E2E8DD;
  --sage-200: #C5D1BC;
  --sage-400: #8B9A7D;
  --sage-500: #6B7F5D;
  --sage-600: #5E6E52;

  /* Core Colors — Gold */
  --gold-50: #FDF9EE;
  --gold-100: #F7EDCC;
  --gold-200: #EEDEA5;
  --gold-400: #C4A057;
  --gold-500: #A68B45;
  --gold-600: #9A7B3A;

  /* Core Colors — Rose */
  --rose-50: #FDF5F3;
  --rose-100: #F8E4DF;
  --rose-200: #F0C4BB;
  --rose-400: #E8A598;
  --rose-600: #D88B7A;

  /* Core Colors — Blue */
  --blue-50: #F0F5FA;
  --blue-400: #5B8DB8;
  --blue-600: #3A6B91;

  /* Extended Colors */
  --purple-50: #F5F0FA;
  --purple-400: #9B7DC4;
  --purple-600: #7B5DA4;

  --red-50: #FDF2F2;
  --red-400: #E07070;
  --red-600: #C05050;

  --amber-50: #FFF8E1;
  --amber-400: #D4A030;
  --amber-600: #B08020;

  --teal-50: #E8F5F3;
  --teal-400: #4DA89A;
  --teal-600: #2D8878;

  /* Dark "Study Night" */
  --dark-base: #1C1A17;
  --dark-surface: #252320;
  --dark-surface-raised: #2E2B27;
  --dark-text: #E2DDD5;
  --dark-text-secondary: #A09890;
  --dark-border: #3A3630;
  --dark-gold-400: #B89040;
  --dark-gold-600: #E0C070;

  /* Gradients */
  --gradient-accent: linear-gradient(135deg, var(--sage-400) 0%, var(--gold-400) 100%);
  --gradient-accent-90: linear-gradient(90deg, var(--sage-400), var(--gold-400));

  /* Typography */
  --font-serif: 'Noto Serif JP', serif;
  --font-sans: 'Noto Sans JP', 'Inter', sans-serif;
  --font-en: 'Inter', sans-serif;

  /* Spacing (base: 4px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Layout widths */
  --content-narrow: 640px;
  --content-standard: 800px;
  --content-wide: 1080px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(44, 51, 48, 0.06);
  --shadow-md: 0 4px 12px rgba(44, 51, 48, 0.08);
  --shadow-lg: 0 8px 24px rgba(44, 51, 48, 0.12);

  /* Timing */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}