/* Arcade Emerald Design Tokens */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Colors */
  --arcade-canvas-white: #ffffff;
  --arcade-whisper-gray: #f9fafb;
  --arcade-outline-ash: #e5e7eb;
  --arcade-graphite-text: #111827;
  --arcade-slate-text: #4b5563;
  --arcade-silver-text: #374151;
  --arcade-steel-accent: #70747d;
  --arcade-emerald: #166534;
  --arcade-deep-emerald-shadow: #14532d;
  
  /* Gradients */
  --arcade-dark-gradient-base: linear-gradient(92deg, rgb(17, 24, 39) 70%, rgba(24, 45, 35, 0.92) 95%);
  --arcade-emerald-gradient-accent: linear-gradient(90deg, rgb(17, 24, 39) 0%, rgb(17, 24, 39) 45%, rgb(22, 101, 52) 50%, rgb(74, 222, 128) 55%, rgb(17, 24, 39) 60%, rgb(17, 24, 39) 100%);

  /* Typography Families */
  --font-inter: 'Inter', system-ui, sans-serif;
  --font-decorative: cursive; /* Substitute for Balig Script */

  /* Typography Scale */
  --text-caption: 12px;
  --text-body-sm: 14px;
  --text-body: 16px;
  --text-subheading: 18px;
  --text-heading-sm: 24px;
  --text-heading: 36px;
  --text-heading-lg: 48px;
  --text-display: 64px;

  /* Line Heights */
  --lh-caption: 1.5;
  --lh-body-sm: 1.43;
  --lh-body: 1.5;
  --lh-subheading: 1.56;
  --lh-heading-sm: 1.33;
  --lh-heading: 1.25;
  --lh-heading-lg: 1.17;
  --lh-display: 1.07;

  /* Spacing */
  --spacing-base: 4px;
  --spacing-gap: 8px;
  --spacing-card-pad: 32px; /* Reduced for better card proportions */
  --spacing-section: 48px; /* Reduced for closer sections */
  --layout-max-width: 1304px;
  
  /* Border Radius */
  --radius-cards: 16px;
  --radius-inputs: 16px;
  --radius-buttons: 12px;
  --radius-decorative: 24px;
  --radius-large-actions: 72px;

  /* Elevation (Shadows) */
  --shadow-card: rgba(17, 24, 39, 0.18) 0px 8px 8px 0px, rgba(20, 83, 45, 0.08) 0px 0px 0px 1px;
  --shadow-subtle: rgba(17, 24, 39, 0.08) 0px 0px 0px 1px, rgba(20, 83, 45, 0.04) 0px 4px 8px 0px;
  --shadow-btn-normal: rgba(17, 24, 39, 0.04) 0px 16px 16px 0px, rgba(20, 83, 45, 0.18) 0px 0px 0px 1px;
  --shadow-btn-hover: rgba(17, 24, 39, 0.06) 0px 24px 24px 0px, rgba(20, 83, 45, 0.24) 0px 0px 0px 1px;
}