/* ==========================================================================
   Karawang Creative - Design Tokens & Variables (Movlo-Inspired Editorial)
   ========================================================================== */

:root {
  /* Typography Families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'Fragment Mono', 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Color Palette - Warm Editorial Natural */
  --bg-primary: #FAF9F5;      /* Warm off-white / bone canvas */
  --bg-secondary: #F3F1EB;    /* Light ivory tinted container */
  --bg-tertiary: #ECE8E0;     /* Muted sand background */
  --bg-card: #FFFFFF;         /* Crisp card background */
  --bg-dark: #121212;         /* Deep studio charcoal / black */
  --bg-dark-surface: #1C1B19; /* Rich dark container */

  --text-primary: #141413;    /* Confident deep charcoal / black */
  --text-secondary: #5E5D59;  /* Balanced neutral grey */
  --text-muted: #8E8D88;      /* Subtle micro-label grey */
  --text-light: #FFFFFF;      /* White text for dark surfaces */
  --text-light-muted: #A8A7A1;/* Muted white text */

  --accent-earth: #8C7355;    /* Warm rattan / earth tone */
  --accent-earth-hover: #755E42;
  --accent-green: #3B4D3C;    /* Muted olive leaf accent */
  --accent-sand: #E6DFC5;

  /* Borders & Separators */
  --border-subtle: rgba(20, 20, 19, 0.08);
  --border-light: rgba(255, 255, 255, 0.12);
  --border-card: rgba(20, 20, 19, 0.06);
  --border-focus: #141413;

  /* Layout & Spacing */
  --max-width: 1440px;
  --max-width-narrow: 1120px;
  --header-height: 84px;
  --container-padding: clamp(1.25rem, 4vw, 3.5rem);
  --section-spacing: clamp(5rem, 9vw, 9.5rem);

  /* Border Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-subtle: 0 4px 20px -2px rgba(20, 20, 19, 0.04);
  --shadow-card: 0 12px 32px -4px rgba(20, 20, 19, 0.06);
  --shadow-hover: 0 20px 40px -8px rgba(20, 20, 19, 0.12);
  --shadow-drawer: -10px 0 40px rgba(0, 0, 0, 0.15);

  /* Transitions & Curves */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 0.2s var(--ease-out);
  --transition-normal: 0.35s var(--ease-out);
  --transition-slow: 0.6s var(--ease-out);
  --transition-drawer: 0.45s cubic-bezier(0.32, 0.72, 0, 1);

  /* Elevation */
  --z-base: 1;
  --z-nav: 100;
  --z-modal: 200;
  --z-toast: 300;
}