/* ==========================================================================
   DXP — DESIGN TOKENS
   A local-area discovery & directory platform.
   Design concept: "wayfinding" — the calm, confident clarity of a well-made
   building directory / transit sign, not a generic SaaS gradient page.
   ========================================================================== */

:root {
  /* ---- Color: brand ---- */
  --color-primary-900: #0A3B3E;
  --color-primary-700: #0E5257;
  --color-primary-600: #126269;
  --color-primary-500: #17767E;
  --color-primary-100: #E3EFEE;
  --color-primary-50:  #F0F6F5;

  --color-accent-700: #B67A1B;
  --color-accent-600: #C98A20;
  --color-accent-500: #E29A2E;
  --color-accent-100: #FBEBD2;

  /* ---- Color: neutrals ---- */
  --color-ink:        #16211F;
  --color-ink-soft:    #3C4644;
  --color-muted:       #6E756E;
  --color-muted-soft:  #8B918A;
  --color-border:      #E2E2DA;
  --color-border-soft: #ECECE5;
  --color-bg:          #FAFAF8;
  --color-bg-sunken:   #F3F3EE;
  --color-surface:     #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-overlay:     rgba(22, 33, 31, 0.52);

  /* ---- Color: semantic ---- */
  --color-success-700: #1F6E44;
  --color-success-500: #2F8F5B;
  --color-success-100: #E1F3E8;

  --color-warning-700: #A2650F;
  --color-warning-500: #D98C2B;
  --color-warning-100: #FBEDD8;

  --color-error-700:  #9A2E1C;
  --color-error-500:  #C3402A;
  --color-error-100:  #FBE3DE;

  --color-info-700:   #204F73;
  --color-info-500:   #2E6FA3;
  --color-info-100:   #E4EEF6;

  --color-featured-700: #8A5A12;
  --color-featured-500: #C99A3E;
  --color-featured-100: #F7ECD4;

  /* ---- Typography ---- */
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  --fs-h1: clamp(2rem, 1.6rem + 1.8vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem);
  --fs-h4: 1.25rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-label: 0.8125rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.55;

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---- Shadow (used sparingly — flat design by default) ---- */
  --shadow-sm: 0 1px 2px rgba(22, 33, 31, 0.06);
  --shadow-md: 0 4px 16px rgba(22, 33, 31, 0.08);
  --shadow-lg: 0 12px 32px rgba(22, 33, 31, 0.12);
  --shadow-focus: 0 0 0 3px rgba(23, 118, 126, 0.28);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med: 200ms;

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-pad: clamp(16px, 4vw, 32px);
  --header-h: 68px;

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-dropdown: 200;
  --z-modal: 500;
  --z-toast: 600;
}

/* Breakpoints (reference — used as comments for media queries):
   --bp-sm: 480px   phone
   --bp-md: 768px   tablet
   --bp-lg: 1024px  laptop
   --bp-xl: 1280px  desktop
*/

@media (prefers-color-scheme: dark) {
  /* Reserved for future dark mode — not enabled by default per brief (clean, trustworthy, print-like directory feel reads best in light). */
}