/* ============================================================================
   JAHATAKSAFAR — 01 TOKENS
   Design System: "The Field Folio"
   Surveyor's plate, nocturnal pine, and instrument brass.
   ============================================================================ */

:root {
  /* Nocturnal Ground — deep pine-black with organic depth */
  --pigment-void: #050807;
  --pigment-obsidian: #0A0F0D;
  --pigment-pine-900: #0D1412;
  --pigment-pine-800: #111917;
  --pigment-pine-700: #16201D;
  --pigment-pine-600: #1D2926;
  --pigment-pine-500: #26332F;

  /* Warm Leather / Espresso Counter-surfaces */
  --pigment-espresso-900: #0F0C0A;
  --pigment-espresso-800: #150F0C;
  --pigment-espresso-700: #1D1611;

  /* Archival Rag / Paper */
  --pigment-alabaster: #F4F1EA;
  --pigment-rag: #E9E6DE;
  --pigment-rag-deep: #DBD6CB;

  /* Instrument Brass (Primary Metallic Accent) */
  --pigment-brass-hi: #EBD9AE;
  --pigment-brass: #C2A36B;
  --pigment-brass-mid: #A88849;
  --pigment-brass-lo: #6E5830;

  /* Monastery Accents */
  --pigment-saffron: #E0A03C;
  --pigment-madder: #A8492A;
  --pigment-sage: #8CA089;
  --pigment-lapis: #2C4A6E;

  /* WhatsApp Brand Palette */
  --whatsapp-green: #25D366;
  --whatsapp-dark: #128C7E;
  --whatsapp-teal: #075E54;
  --whatsapp-surface: rgba(37, 211, 102, 0.12);
  --whatsapp-border: rgba(37, 211, 102, 0.35);

  /* Semantic Surfaces */
  --bg-canvas: var(--pigment-obsidian);
  --bg-sunken: var(--pigment-void);
  --bg-surface: var(--pigment-pine-900);
  --bg-raised: var(--pigment-pine-800);
  --bg-overlay: var(--pigment-pine-700);

  --bg-glass: rgba(17, 25, 23, 0.72);
  --bg-glass-strong: rgba(13, 20, 18, 0.88);
  --bg-glass-card: rgba(22, 32, 29, 0.65);

  /* Inks */
  --ink-primary: #F4F1EA;
  --ink-secondary: #CBD5E1;
  --ink-tertiary: #94A3B8;
  --ink-quiet: #64748B;
  --ink-brass: var(--pigment-brass-hi);
  --ink-inverse: #0A0F0D;

  /* Hairlines & Brass Borders */
  --line-whisper: rgba(235, 217, 174, 0.08);
  --line-hair: rgba(235, 217, 174, 0.16);
  --line-edge: rgba(235, 217, 174, 0.28);
  --line-brass: rgba(194, 163, 107, 0.45);
  --line-brass-bright: rgba(235, 217, 174, 0.75);

  /* Typography */
  --font-serif: "Newsreader", "Playfair Display", Georgia, serif;
  --font-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Spacing Scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 9999px;

  /* Elevation Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.75);
  --shadow-brass: 0 0 24px rgba(194, 163, 107, 0.2);

  /* Transitions */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 500ms;
}