/**
 * Design Tokens
 * Apple-inspired design system tokens for Causal Atlas
 *
 * Following Apple's design principles:
 * - Quiet confidence
 * - Subtle dimensionality
 * - Precise typography
 * - Generous whitespace
 */

:root {
  /* ========================================================================
     COLOR PALETTE
     Based on Apple's neutral palette with subtle causal-themed accents
     ======================================================================== */

  /* Neutrals */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-grey-50: #fafafa;
  --color-grey-100: #f5f5f7;
  --color-grey-200: #e8e8ed;
  --color-grey-300: #d2d2d7;
  --color-grey-400: #c7c7cc;
  --color-grey-500: #a1a1a6;
  --color-grey-600: #86868b;
  --color-grey-700: #6e6e73;
  --color-grey-800: #424245;
  --color-grey-900: #1d1d1f;

  /* Primary/Accent - Rich Apple Gold (warm, sophisticated) */
  --color-primary-50: #fff9f0;
  --color-primary-100: #ffefd6;
  --color-primary-200: #ffe4bc;
  --color-primary-300: #ffd89f;
  --color-primary-400: #ffcc78;
  --color-primary-500: #ebc378;
  --color-primary-600: #d4ae66;
  --color-primary-700: #b89654;
  --color-primary-800: #9c7d42;
  --color-primary-900: #7a6230;

  /* Accent variations for different contexts */
  --accent-gold: rgba(235, 195, 120, 1);      /* Primary warm gold */
  --accent-gold-light: rgba(255, 215, 145, 1); /* Lighter gold for highlights */
  --accent-bronze: rgba(180, 160, 140, 1);     /* Muted bronze for subtle accents */
  --accent-warm: rgba(255, 250, 240, 1);       /* Warm white for text on dark */

  /* Semantic Colors */
  --color-success: #30d158;
  --color-warning: #ff9f0a;
  --color-error: #ff453a;
  --color-info: #64d2ff;

  /* Surface Colors */
  --color-surface-base: var(--color-white);
  --color-surface-raised: var(--color-grey-50);
  --color-surface-overlay: rgba(255, 255, 255, 0.8);
  --color-surface-inverse: var(--color-grey-900);
  --color-surface-primary: var(--color-white);
  --color-surface-secondary: var(--color-grey-50);

  /* Glass Effect Colors */
  --glass-light: rgba(255, 255, 255, 0.7);
  --glass-medium: rgba(255, 255, 255, 0.5);
  --glass-dark: rgba(0, 0, 0, 0.3);

  /* Blur effects for glassmorphism */
  --blur-light: blur(8px);
  --blur-medium: blur(20px);
  --blur-heavy: blur(40px);

  /* Text Color Overrides */
  --color-text-primary: var(--color-grey-900);
  --color-text-secondary: var(--color-grey-600);
  --color-text-tertiary: var(--color-grey-500);
  --color-text-inverted: var(--color-white);

  /* Duration aliases */
  --duration-quick: var(--duration-fast);
  --duration-base: var(--duration-normal);
  --duration-extended: var(--duration-slow);

  /* Easing aliases */
  --easing-ease-in-out: var(--ease-standard);
  --easing-ease-out: var(--ease-decelerate);
  --easing-ease-in: var(--ease-accelerate);

  /* ========================================================================
     TYPOGRAPHY
     Apple's SF Pro Display system with precise hierarchy
     ======================================================================== */

  /* Font Families */
  --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

  /* Font Sizes - Modular scale based on 1.125 (major second) */
  --font-size-xs: 0.694rem;     /* 11.11px */
  --font-size-sm: 0.833rem;     /* 13.33px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-md: 1.125rem;     /* 18px */
  --font-size-lg: 1.266rem;     /* 20.26px */
  --font-size-xl: 1.424rem;     /* 22.78px */
  --font-size-2xl: 1.602rem;    /* 25.63px */
  --font-size-3xl: 1.802rem;    /* 28.83px */
  --font-size-4xl: 2.027rem;    /* 32.43px */
  --font-size-5xl: 2.281rem;    /* 36.50px */
  --font-size-6xl: 2.566rem;    /* 41.06px */
  --font-size-7xl: 3.247rem;    /* 51.95px */
  --font-size-8xl: 4.209rem;    /* 67.34px */
  --font-size-9xl: 5.653rem;    /* 90.45px */

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* Letter Spacing */
  --letter-spacing-tight: -0.022em;
  --letter-spacing-normal: -0.012em;
  --letter-spacing-wide: 0.01em;

  /* ========================================================================
     SPACING SYSTEM
     Based on 8px base unit - Apple's perfect grid system
     All spacing MUST be multiples of 8px for pixel-perfect alignment
     ======================================================================== */

  --space-0: 0;
  --space-1: 0.5rem;    /* 8px - base unit */
  --space-2: 1rem;      /* 16px */
  --space-3: 1.5rem;    /* 24px */
  --space-4: 2rem;      /* 32px */
  --space-5: 2.5rem;    /* 40px */
  --space-6: 3rem;      /* 48px */
  --space-7: 3.5rem;    /* 56px */
  --space-8: 4rem;      /* 64px */
  --space-10: 5rem;     /* 80px */
  --space-12: 6rem;     /* 96px */
  --space-14: 7rem;     /* 112px */
  --space-16: 8rem;     /* 128px */
  --space-20: 10rem;    /* 160px */
  --space-24: 12rem;    /* 192px */
  --space-32: 16rem;    /* 256px */

  /* Semantic Spacing */
  --space-xs: var(--space-1);   /* 8px */
  --space-sm: var(--space-2);   /* 16px */
  --space-md: var(--space-3);   /* 24px */
  --space-lg: var(--space-4);   /* 32px */
  --space-xl: var(--space-6);   /* 48px */
  --space-2xl: var(--space-8);  /* 64px */
  --space-3xl: var(--space-12); /* 96px */
  --space-4xl: var(--space-16); /* 128px */

  /* ========================================================================
     ELEVATION & SHADOWS
     Apple's 4-layer shadow system: Contact + Penumbra + Ambient + Deep
     Creates realistic depth with subtle, natural-looking shadows
     ======================================================================== */

  /* Elevation 0 - Flat (no shadow) */
  --shadow-0: none;

  /* Elevation 1 - Barely lifted (cards at rest) */
  --shadow-1:
    0 0.5px 1px 0 rgba(0, 0, 0, 0.08),      /* Contact */
    0 1px 2px 0 rgba(0, 0, 0, 0.06),        /* Penumbra */
    0 1px 3px 0 rgba(0, 0, 0, 0.04),        /* Ambient */
    0 2px 4px -1px rgba(0, 0, 0, 0.03);     /* Deep */

  /* Elevation 2 - Slightly raised (buttons, inputs) */
  --shadow-2:
    0 1px 2px 0 rgba(0, 0, 0, 0.1),         /* Contact */
    0 2px 4px -1px rgba(0, 0, 0, 0.08),     /* Penumbra */
    0 3px 6px -1px rgba(0, 0, 0, 0.06),     /* Ambient */
    0 4px 8px -2px rgba(0, 0, 0, 0.04);     /* Deep */

  /* Elevation 3 - Raised (dropdowns, popovers) */
  --shadow-3:
    0 2px 3px 0 rgba(0, 0, 0, 0.12),        /* Contact */
    0 4px 8px -2px rgba(0, 0, 0, 0.1),      /* Penumbra */
    0 6px 12px -2px rgba(0, 0, 0, 0.08),    /* Ambient */
    0 8px 16px -4px rgba(0, 0, 0, 0.06);    /* Deep */

  /* Elevation 4 - Floating (modals, sheets) */
  --shadow-4:
    0 3px 5px 0 rgba(0, 0, 0, 0.14),        /* Contact */
    0 8px 16px -4px rgba(0, 0, 0, 0.12),    /* Penumbra */
    0 12px 24px -6px rgba(0, 0, 0, 0.1),    /* Ambient */
    0 16px 32px -8px rgba(0, 0, 0, 0.08);   /* Deep */

  /* Elevation 5 - High (dialogs, overlays) */
  --shadow-5:
    0 4px 8px 0 rgba(0, 0, 0, 0.16),        /* Contact */
    0 12px 24px -6px rgba(0, 0, 0, 0.14),   /* Penumbra */
    0 20px 40px -10px rgba(0, 0, 0, 0.12),  /* Ambient */
    0 24px 48px -12px rgba(0, 0, 0, 0.1);   /* Deep */

  /* Elevation 6 - Maximum (tooltips, notifications) */
  --shadow-6:
    0 6px 12px 0 rgba(0, 0, 0, 0.18),       /* Contact */
    0 16px 32px -8px rgba(0, 0, 0, 0.16),   /* Penumbra */
    0 32px 64px -16px rgba(0, 0, 0, 0.14),  /* Ambient */
    0 40px 80px -20px rgba(0, 0, 0, 0.12);  /* Deep */

  /* Legacy aliases for backward compatibility */
  --shadow-xs: var(--shadow-1);
  --shadow-sm: var(--shadow-2);
  --shadow-md: var(--shadow-3);
  --shadow-lg: var(--shadow-4);
  --shadow-xl: var(--shadow-5);
  --shadow-2xl: var(--shadow-6);

  /* Inner Shadows */
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-inner-strong: inset 0 3px 6px 0 rgba(0, 0, 0, 0.1);

  /* Colored Shadows for interactive states (warm gold accent) */
  --shadow-accent:
    0 4px 8px -2px rgba(235, 195, 120, 0.24),
    0 8px 16px -4px rgba(235, 195, 120, 0.16),
    0 12px 24px -6px rgba(235, 195, 120, 0.12),
    0 16px 32px -8px rgba(235, 195, 120, 0.08);

  /* ========================================================================
     BORDER RADIUS
     Consistent rounding for different UI elements
     ======================================================================== */

  --radius-none: 0;
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-3xl: 2rem;      /* 32px */
  --radius-full: 9999px;

  /* ========================================================================
     Z-INDEX SCALE
     Consistent stacking order
     ======================================================================== */

  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-fixed: 1200;
  --z-modal-backdrop: 1300;
  --z-modal: 1400;
  --z-popover: 1500;
  --z-tooltip: 1600;

  /* ========================================================================
     MOTION & ANIMATION
     Apple's signature easing curves and durations
     ======================================================================== */

  /* Durations */
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --duration-slower: 500ms;
  --duration-slowest: 700ms;

  /* Easing Functions */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
  --ease-sharp: cubic-bezier(0.4, 0.0, 0.6, 1);

  /* Apple-specific easings */
  --ease-apple: cubic-bezier(0.42, 0, 0.58, 1);
  --ease-apple-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-apple-in: cubic-bezier(0.42, 0, 1, 1);
  --ease-apple-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-apple-expo: cubic-bezier(0.19, 1, 0.22, 1);

  /* ========================================================================
     BREAKPOINTS
     Mobile-first responsive design breakpoints
     ======================================================================== */

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* ========================================================================
     CONTAINER WIDTHS
     ======================================================================== */

  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1400px;

  /* ========================================================================
     BLUR EFFECTS
     For glassmorphism and backdrop filters
     ======================================================================== */

  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-2xl: 40px;

  /* ========================================================================
     OPACITY SCALE
     ======================================================================== */

  --opacity-0: 0;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-100: 1;
}

/* ========================================================================
   DARK MODE SUPPORT (Optional - for future enhancement)
   ======================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --color-surface-base: var(--color-grey-900);
    --color-surface-raised: var(--color-grey-800);
    --color-surface-overlay: rgba(0, 0, 0, 0.8);
    --color-surface-inverse: var(--color-white);
  }
}