/**
 * dsalathe Design System - Design Tokens
 * Alpine/Swiss Technical Theme
 *
 * Inspired by: Alpine twilight, mountain skies at dusk, Swiss precision,
 *              northern lights over mountains, granite and slate
 *
 * Color Philosophy:
 *   - Primary: Vibrant sky blues with subtle purple tints (mountain sky at dusk)
 *   - Background: Soft lavender tones (alpine twilight, not sterile white)
 *   - Accent: Purple-to-blue gradients (northern lights over mountains)
 *   - Secondary: Deep navy (mountain shadows at night)
 *   - Neutrals: Cool grays (granite and slate rock)
 *   - Pop: Swiss red (maintained from original)
 *
 * Usage:
 *   <link rel="stylesheet" href="https://static.dsalathe.dev/css/dsalathe-tokens.css">
 *
 * @version 2.0.0
 */

:root {
  /* ============================================
   * COLOR PALETTE - Alpine/Swiss Theme
   * ============================================ */

  /* Lavender - Primary background color (alpine twilight sky) 
   * Very subtle, airy tones - the blog uses this as the main page background
   * Should feel light and breathable, not heavy or saturated */
  --ds-lavender-50: #fafaff;     /* Almost white with hint of lavender */
  --ds-lavender-100: #f0f4ff;    /* Very light lavender */
  --ds-lavender-200: #e0e7ff;    /* Your blog background color */
  --ds-lavender-300: #d0d9ff;    /* Slightly deeper - good for borders */
  --ds-lavender-400: #b8c4fc;    /* Medium lavender */
  --ds-lavender-500: #9ba8f5;    /* Balanced lavender */
  --ds-lavender-600: #7c8aeb;    /* Richer lavender */
  --ds-lavender-700: #5f6dd9;    /* Deep lavender */
  --ds-lavender-800: #4a54b8;    /* Dark lavender */
  --ds-lavender-900: #3d4494;    /* Very dark lavender */
  --ds-lavender-950: #262a5c;    /* Deepest lavender */

  /* Sky Blue - Primary action color (mountain sky at dusk) */
  --ds-sky-50: #eef8ff;
  --ds-sky-100: #d9efff;
  --ds-sky-200: #bce4ff;
  --ds-sky-300: #8ed4ff;
  --ds-sky-400: #59bbfa;
  --ds-sky-500: #4299e1;   /* Your blog primary blue */
  --ds-sky-600: #2b7dc9;
  --ds-sky-700: #2565a3;
  --ds-sky-800: #245486;
  --ds-sky-900: #22476f;
  --ds-sky-950: #172d4a;

  /* Purple - Gradient accent color (northern lights) */
  --ds-purple-50: #f5f3ff;
  --ds-purple-100: #ede9fe;
  --ds-purple-200: #ddd6fe;
  --ds-purple-300: #c4b5fd;
  --ds-purple-400: #a78bfa;
  --ds-purple-500: #667eea;   /* Your blog gradient start */
  --ds-purple-600: #5a67d8;
  --ds-purple-700: #4c51bf;
  --ds-purple-800: #434190;
  --ds-purple-900: #3c3976;
  --ds-purple-950: #27234f;

  /* Alpine Navy - Secondary deep tone (mountain shadow at night) */
  --ds-navy-50: #f4f6f8;
  --ds-navy-100: #e3e8ed;
  --ds-navy-200: #cad3dc;
  --ds-navy-300: #a5b3c1;
  --ds-navy-400: #798c9f;
  --ds-navy-500: #5e7185;
  --ds-navy-600: #4f5f72;
  --ds-navy-700: #445060;
  --ds-navy-800: #3c4552;
  --ds-navy-900: #1a202c;   /* Your blog dark text */
  --ds-navy-950: #12161e;

  /* Slate Gray - Neutral tone (granite and slate rock - cool grays) */
  --ds-slate-50: #f7f8fa;
  --ds-slate-100: #eef0f4;
  --ds-slate-200: #e2e6ec;
  --ds-slate-300: #cbd2dc;
  --ds-slate-400: #718096;   /* Your blog muted text */
  --ds-slate-500: #4a5568;   /* Your blog secondary text */
  --ds-slate-600: #4a5568;
  --ds-slate-700: #3d4556;
  --ds-slate-800: #2d3442;
  --ds-slate-900: #1e242e;
  --ds-slate-950: #0f1218;

  /* Alpine Red - Accent color (Swiss cross) */
  --ds-red-50: #FEF2F3;
  --ds-red-100: #FEE2E4;
  --ds-red-200: #FECACD;
  --ds-red-300: #FCA5AB;
  --ds-red-400: #F8717B;
  --ds-red-500: #EF4352;
  --ds-red-600: #C41E3A;
  --ds-red-700: #A91B32;
  --ds-red-800: #8C1A2E;
  --ds-red-900: #761C2D;
  --ds-red-950: #410A13;

  /* Snow White - Clean surface tones (preserved for surfaces/cards) */
  --ds-snow-50: #FFFFFF;
  --ds-snow-100: #FEFEFE;
  --ds-snow-200: #FAFBFC;
  --ds-snow-300: #F5F7F9;
  --ds-snow-400: #EEF1F4;
  --ds-snow-500: #E4E9ED;

  /* Glacier Blue - Secondary cool tone (ice/glacier) */
  --ds-glacier-50: #F0F9FB;
  --ds-glacier-100: #E0F3F7;
  --ds-glacier-200: #C2E7EF;
  --ds-glacier-300: #94D6E3;
  --ds-glacier-400: #5FBDD1;
  --ds-glacier-500: #3AA3BC;
  --ds-glacier-600: #2E849D;
  --ds-glacier-700: #2A6B80;
  --ds-glacier-800: #295969;
  --ds-glacier-900: #264A59;
  --ds-glacier-950: #14303B;

  /* Success - Alpine meadow green */
  --ds-success-50: #ECFDF5;
  --ds-success-100: #D1FAE5;
  --ds-success-200: #A7F3D0;
  --ds-success-300: #6EE7B7;
  --ds-success-400: #34D399;
  --ds-success-500: #10B981;
  --ds-success-600: #059669;
  --ds-success-700: #047857;
  --ds-success-800: #065F46;
  --ds-success-900: #064E3B;

  /* Warning - Alpine sunset */
  --ds-warning-50: #FFFBEB;
  --ds-warning-100: #FEF3C7;
  --ds-warning-200: #FDE68A;
  --ds-warning-300: #FCD34D;
  --ds-warning-400: #FBBF24;
  --ds-warning-500: #F59E0B;
  --ds-warning-600: #D97706;
  --ds-warning-700: #B45309;
  --ds-warning-800: #92400E;
  --ds-warning-900: #78350F;

  /* ============================================
   * SEMANTIC COLOR MAPPINGS
   * Light mode defaults - matching blog aesthetic
   * ============================================ */

  /* Primary colors - purple/indigo for buttons and CTAs */
  --ds-primary: var(--ds-purple-500);
  --ds-primary-hover: var(--ds-purple-600);
  --ds-primary-active: var(--ds-purple-700);
  --ds-primary-light: var(--ds-purple-100);
  --ds-primary-dark: var(--ds-purple-800);

  /* Secondary colors - sky blue for links and secondary actions */
  --ds-secondary: var(--ds-sky-500);
  --ds-secondary-hover: var(--ds-sky-600);
  --ds-secondary-active: var(--ds-sky-700);
  --ds-secondary-light: var(--ds-sky-100);

  /* Accent colors - Swiss red for alerts/important */
  --ds-accent: var(--ds-red-600);
  --ds-accent-hover: var(--ds-red-700);
  --ds-accent-active: var(--ds-red-800);
  --ds-accent-light: var(--ds-red-100);

  /* Gradient colors - northern lights (purple to blue) */
  --ds-gradient-start: var(--ds-purple-500);
  --ds-gradient-end: var(--ds-sky-500);
  --ds-gradient-primary: linear-gradient(135deg, var(--ds-gradient-start) 0%, var(--ds-gradient-end) 100%);

  /* Background colors - soft lavender page background */
  --ds-background: var(--ds-lavender-200);           /* Main page background */
  --ds-background-alt: var(--ds-lavender-100);       /* Alternate/lighter background */
  --ds-background-subtle: var(--ds-lavender-50);     /* Very subtle background */
  --ds-surface: var(--ds-snow-50);                   /* Cards, panels - pure white */
  --ds-surface-elevated: var(--ds-snow-50);          /* Elevated surfaces - white */
  --ds-surface-sunken: var(--ds-lavender-100);       /* Sunken areas - very light */

  /* Text colors - dark navy for readability on light backgrounds */
  --ds-text-primary: var(--ds-navy-900);             /* Main text - dark navy */
  --ds-text-secondary: var(--ds-slate-500);          /* Secondary text - cool gray */
  --ds-text-muted: var(--ds-slate-400);              /* Muted/helper text */
  --ds-text-inverse: var(--ds-snow-50);              /* Text on dark backgrounds */
  --ds-text-link: var(--ds-sky-500);                 /* Link color - sky blue */
  --ds-text-link-hover: var(--ds-sky-600);           /* Link hover */

  /* Border colors - subtle lavender borders */
  --ds-border: var(--ds-lavender-300);               /* Standard borders */
  --ds-border-light: var(--ds-lavender-200);         /* Subtle borders */
  --ds-border-strong: var(--ds-lavender-400);        /* Emphasized borders */
  --ds-border-focus: var(--ds-purple-500);           /* Focus state border */

  /* Input colors - clean white inputs */
  --ds-input-background: var(--ds-snow-50);          /* Input background */
  --ds-input-border: var(--ds-lavender-300);         /* Input border */
  --ds-input-border-focus: var(--ds-purple-500);     /* Input focus border */

  /* State colors */
  --ds-success: var(--ds-success-500);
  --ds-warning: var(--ds-warning-500);
  --ds-error: var(--ds-red-600);
  --ds-info: var(--ds-sky-500);

  /* ============================================
   * TYPOGRAPHY
   * Swiss precision, technical clarity
   * ============================================ */

  /* Font families */
  --ds-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ds-font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Courier New', monospace;
  --ds-font-display: var(--ds-font-sans);

  /* Font sizes - modular scale (1.25 ratio) */
  --ds-text-xs: 0.75rem;      /* 12px */
  --ds-text-sm: 0.875rem;     /* 14px */
  --ds-text-base: 1rem;       /* 16px */
  --ds-text-lg: 1.125rem;     /* 18px */
  --ds-text-xl: 1.25rem;      /* 20px */
  --ds-text-2xl: 1.5rem;      /* 24px */
  --ds-text-3xl: 1.875rem;    /* 30px */
  --ds-text-4xl: 2.25rem;     /* 36px */
  --ds-text-5xl: 3rem;        /* 48px */

  /* Line heights */
  --ds-leading-none: 1;
  --ds-leading-tight: 1.25;
  --ds-leading-snug: 1.375;
  --ds-leading-normal: 1.5;
  --ds-leading-relaxed: 1.625;
  --ds-leading-loose: 2;

  /* Font weights */
  --ds-font-light: 300;
  --ds-font-normal: 400;
  --ds-font-medium: 500;
  --ds-font-semibold: 600;
  --ds-font-bold: 700;

  /* Letter spacing */
  --ds-tracking-tighter: -0.05em;
  --ds-tracking-tight: -0.025em;
  --ds-tracking-normal: 0;
  --ds-tracking-wide: 0.025em;
  --ds-tracking-wider: 0.05em;
  --ds-tracking-widest: 0.1em;

  /* ============================================
   * SPACING
   * Swiss grid system - clean, geometric
   * ============================================ */

  --ds-space-0: 0;
  --ds-space-px: 1px;
  --ds-space-0-5: 0.125rem;   /* 2px */
  --ds-space-1: 0.25rem;      /* 4px */
  --ds-space-1-5: 0.375rem;   /* 6px */
  --ds-space-2: 0.5rem;       /* 8px */
  --ds-space-2-5: 0.625rem;   /* 10px */
  --ds-space-3: 0.75rem;      /* 12px */
  --ds-space-3-5: 0.875rem;   /* 14px */
  --ds-space-4: 1rem;         /* 16px */
  --ds-space-5: 1.25rem;      /* 20px */
  --ds-space-6: 1.5rem;       /* 24px */
  --ds-space-7: 1.75rem;      /* 28px */
  --ds-space-8: 2rem;         /* 32px */
  --ds-space-9: 2.25rem;      /* 36px */
  --ds-space-10: 2.5rem;      /* 40px */
  --ds-space-11: 2.75rem;     /* 44px */
  --ds-space-12: 3rem;        /* 48px */
  --ds-space-14: 3.5rem;      /* 56px */
  --ds-space-16: 4rem;        /* 64px */
  --ds-space-20: 5rem;        /* 80px */
  --ds-space-24: 6rem;        /* 96px */
  --ds-space-28: 7rem;        /* 112px */
  --ds-space-32: 8rem;        /* 128px */

  /* ============================================
   * ELEVATION / SHADOWS
   * Subtle, minimal - Swiss precision
   * ============================================ */

  --ds-shadow-xs: 0 1px 2px 0 rgba(44, 62, 80, 0.03);
  --ds-shadow-sm: 0 1px 3px 0 rgba(44, 62, 80, 0.05), 0 1px 2px -1px rgba(44, 62, 80, 0.05);
  --ds-shadow-md: 0 4px 6px -1px rgba(44, 62, 80, 0.07), 0 2px 4px -2px rgba(44, 62, 80, 0.07);
  --ds-shadow-lg: 0 10px 15px -3px rgba(44, 62, 80, 0.08), 0 4px 6px -4px rgba(44, 62, 80, 0.08);
  --ds-shadow-xl: 0 20px 25px -5px rgba(44, 62, 80, 0.08), 0 8px 10px -6px rgba(44, 62, 80, 0.08);
  --ds-shadow-2xl: 0 25px 50px -12px rgba(44, 62, 80, 0.15);
  --ds-shadow-inner: inset 0 2px 4px 0 rgba(44, 62, 80, 0.04);
  --ds-shadow-none: 0 0 #0000;

  /* Focus ring shadow */
  --ds-ring-offset: 2px;
  --ds-ring-width: 2px;
  --ds-ring-color: var(--ds-sky-500);
  --ds-ring: 0 0 0 var(--ds-ring-offset) var(--ds-surface), 0 0 0 calc(var(--ds-ring-offset) + var(--ds-ring-width)) var(--ds-ring-color);

  /* ============================================
   * BORDER RADIUS
   * Clean but not harsh - precision corners
   * ============================================ */

  --ds-radius-none: 0;
  --ds-radius-sm: 4px;
  --ds-radius-md: 6px;
  --ds-radius-lg: 8px;
  --ds-radius-xl: 12px;
  --ds-radius-2xl: 16px;
  --ds-radius-3xl: 24px;
  --ds-radius-full: 9999px;

  /* ============================================
   * BORDERS
   * ============================================ */

  --ds-border-width-0: 0px;
  --ds-border-width-1: 1px;
  --ds-border-width-2: 2px;
  --ds-border-width-4: 4px;

  /* ============================================
   * TRANSITIONS
   * Smooth, professional animations
   * ============================================ */

  --ds-transition-fast: 150ms;
  --ds-transition-normal: 200ms;
  --ds-transition-slow: 300ms;
  --ds-transition-slower: 500ms;

  --ds-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ds-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ds-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ============================================
   * Z-INDEX SCALE
   * ============================================ */

  --ds-z-dropdown: 1000;
  --ds-z-sticky: 1020;
  --ds-z-fixed: 1030;
  --ds-z-modal-backdrop: 1040;
  --ds-z-modal: 1050;
  --ds-z-popover: 1060;
  --ds-z-tooltip: 1070;

  /* ============================================
   * BREAKPOINTS (for reference in JS)
   * ============================================ */

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

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

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

/* ============================================
 * DARK MODE TOKENS
 * Alpine night theme
 * ============================================ */

@media (prefers-color-scheme: dark) {
  :root.ds-auto-dark,
  :root:not(.ds-light) {
    --ds-background: var(--ds-navy-950);
    --ds-background-alt: var(--ds-navy-900);
    --ds-background-subtle: var(--ds-navy-900);
    --ds-surface: var(--ds-navy-900);
    --ds-surface-elevated: var(--ds-navy-800);
    --ds-surface-sunken: var(--ds-navy-950);

    --ds-text-primary: var(--ds-lavender-100);
    --ds-text-secondary: var(--ds-slate-400);
    --ds-text-muted: var(--ds-slate-500);
    --ds-text-link: var(--ds-sky-400);
    --ds-text-link-hover: var(--ds-sky-300);

    --ds-border: var(--ds-navy-700);
    --ds-border-light: var(--ds-navy-800);
    --ds-border-strong: var(--ds-navy-600);

    --ds-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.2);
    --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);

    /* Dark mode gradient - slightly adjusted for contrast */
    --ds-gradient-start: var(--ds-purple-400);
    --ds-gradient-end: var(--ds-sky-400);
  }
}

/* Explicit dark mode class */
:root.ds-dark {
  --ds-background: var(--ds-navy-950);
  --ds-background-alt: var(--ds-navy-900);
  --ds-background-subtle: var(--ds-navy-900);
  --ds-surface: var(--ds-navy-900);
  --ds-surface-elevated: var(--ds-navy-800);
  --ds-surface-sunken: var(--ds-navy-950);

  --ds-text-primary: var(--ds-lavender-100);
  --ds-text-secondary: var(--ds-slate-400);
  --ds-text-muted: var(--ds-slate-500);
  --ds-text-link: var(--ds-sky-400);
  --ds-text-link-hover: var(--ds-sky-300);

  --ds-border: var(--ds-navy-700);
  --ds-border-light: var(--ds-navy-800);
  --ds-border-strong: var(--ds-navy-600);

  --ds-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.2);
  --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);

  /* Dark mode gradient - slightly adjusted for contrast */
  --ds-gradient-start: var(--ds-purple-400);
  --ds-gradient-end: var(--ds-sky-400);
}