/* ============================================
   Nazli Select — Design Tokens
   Japanese Minimalist Palette

   Wabi-sabi meets 40 years of quiet confidence.
   References: Muji, Aesop, Kinfolk, Tadao Ando.
   ============================================ */

:root {
  /* Colors — Japanese Minimalist */
  --sumi: #1A1A2E;           /* Primary text, headers, dark elements */
  --stone: #E8E0D5;          /* Warm neutral backgrounds, cards */
  --indigo: #4A5568;         /* Secondary text, subtle accents */
  --washi: #FAFAF7;          /* Page background (warm white, like handmade paper) */
  --charcoal: #2D2D2D;       /* Body text (soft, not harsh black) */
  --hairline: #D4CFC7;       /* Borders, dividers (barely visible) */

  /* Functional */
  --color-whatsapp: #25D366;
  --color-whatsapp-hover: #1DA851;
  --color-surface: #F5F0EB;  /* Slightly warmer than stone for cards */
  --color-focus: #4A5568;    /* Focus ring */

  /* Typography — System fonts, thin weights */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;

  --font-size-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
  --font-size-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --font-size-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  --font-size-lg: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  --font-size-xl: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  --font-size-2xl: clamp(1.6rem, 1.3rem + 1.5vw, 2.25rem);
  --font-size-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --font-size-hero: clamp(2.5rem, 2rem + 3vw, 4rem);

  --line-height: 1.7;
  --line-height-tight: 1.3;
  --letter-spacing-wide: 0.12em;
  --letter-spacing-normal: 0.03em;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Layout */
  --container-max: 760px;
  --container-narrow: 600px;
  --container-padding: var(--space-md);
  --border-radius: 4px;
  --border-radius-sm: 2px;

  /* State colors */
  --color-highlight: #FFF3CD;
  --color-highlight-border: #FFC107;
  --color-success: #198754;
  --color-warning: #FFC107;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
}