/* ============================================
   SAKURA IMPORTS — Design System
   ============================================ */

/* ---- COLOR PALETTE ---- */
:root {
  /* Primary — Sakura Pink */
  --sakura-50:  #FFF5F7;
  --sakura-100: #FFE0E8;
  --sakura-200: #FFB7C5;
  --sakura-300: #FF8FAB;
  --sakura-400: #FF6B8A;
  --sakura-500: #FF4D6D;
  --sakura-600: #E6365A;
  --sakura-700: #CC1939;
  --sakura-800: #A31230;
  --sakura-900: #7A0D24;

  /* Neutral — Ink */
  --ink-50:  #F8F9FA;
  --ink-100: #F1F3F5;
  --ink-200: #E9ECEF;
  --ink-300: #DEE2E6;
  --ink-400: #ADB5BD;
  --ink-500: #6C757D;
  --ink-600: #495057;
  --ink-700: #343A40;
  --ink-800: #212529;
  --ink-900: #0F172A;

  /* Accent — Gold */
  --gold-400: #FFD700;
  --gold-500: #F5C518;
  --gold-600: #D4A800;

  /* Semantic */
  --color-success: #2E7D32;
  --color-warning: #F57C00;
  --color-error:   #D32F2F;
  --color-info:    #1565C0;

  /* Surfaces */
  --surface-bg:      #FFFFFF;
  --surface-sakura:  var(--sakura-50);
  --surface-card:    #FFFFFF;
  --surface-elevated:#FFFFFF;

  /* Typography */
  --font-heading: 'Merriweather', Georgia, serif;
  --font-body:    'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes — Modular Scale 1.25 */
  --text-xs:   0.64rem;   /* 10.24px */
  --text-sm:   0.8rem;    /* 12.8px  */
  --text-base: 1rem;      /* 16px    */
  --text-md:   1.25rem;   /* 20px    */
  --text-lg:   1.563rem;  /* 25px    */
  --text-xl:   1.953rem;  /* 31.25px */
  --text-2xl:  2.441rem;  /* 39px    */
  --text-3xl:  3.052rem;  /* 48.8px  */

  /* Spacing — 8px Grid */
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  2.5rem;   /* 40px */
  --space-8:  3rem;     /* 48px */
  --space-9:  4rem;     /* 64px */
  --space-10: 5rem;     /* 80px */
  --space-12: 6rem;     /* 96px */
  --space-16: 8rem;     /* 128px */

  /* Border Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg:    0 8px 30px rgba(0,0,0,0.12);
  --shadow-xl:    0 16px 50px rgba(0,0,0,0.15);
  --shadow-sakura:0 8px 30px rgba(255,77,109,0.15);
  --shadow-glow:  0 0 20px rgba(255,77,109,0.3);

  /* Transitions */
  --ease-out:    cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  /* Z-Index Scale */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-sakura:   9999;

  /* Container */
  --container-max:   1280px;
  --container-narrow: 720px;
  --container-wide:  1440px;

  /* Breakpoints (for reference) */
  /* sm:  480px  — Mobile small    */
  /* md:  768px  — Tablet          */
  /* lg:  1024px — Desktop small   */
  /* xl:  1280px — Desktop         */
  /* 2xl: 1440px — Desktop wide    */
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; max-width: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink-800);
  background: var(--surface-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--sakura-500); text-decoration: none; transition: color var(--duration-fast) ease; }
a:hover { color: var(--sakura-700); }
button { cursor: pointer; font-family: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--ink-900); }

/* ---- LAYOUT ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

/* ---- UTILITIES ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.text-sakura { color: var(--sakura-500); }
.bg-sakura   { background: var(--sakura-50); }