/* ========================================
       ART DIRECTION: Immigration attorney, West Texas
       Tone: Authoritative, bold, trustworthy, approachable
       Palette: Deep navy + gold + ice blue
       Typography: Cormorant Garamond (display) + Plus Jakarta Sans (body)
       Density: Spacious, confident
       ======================================== */
    
    /* --- Design Tokens --- */
    :root, [data-theme="light"] {
      /* Surfaces */
      --color-bg: #f5f3ef;
      --color-surface: #f8f7f4;
      --color-surface-2: #faf9f7;
      --color-surface-offset: #edeae5;
      --color-divider: #ddd9d3;
      --color-border: #d0ccc6;
      --color-surface-3: #fff;
      
      /* Text */
      --color-text: #1a1512;
      --color-text-muted: #6a6057;
      --color-text-faint: #aaa49e;
      --color-text-inverse: #f8f5ef;
      
      /* Primary: Deep Navy */
      --color-primary: #1a1512;
      --color-primary-hover: #0f0f0f;
      --color-primary-light: #e8e5e0;
      
      /* Accent: Texas Gold */
      --color-accent: #c8a030;
      --color-accent-hover: #a88020;
      --color-accent-light: #f2e8d0;
      
      /* Ice Blue: Icebreaker */
      --color-ice: #8b0e0e;
      --color-ice-hover: #700b0b;
      --color-ice-light: #f5dada;
      /* Maroon / Crimson */
      --color-maroon: #8b0e0e;
      --color-maroon-hover: #700b0b;
      --color-maroon-light: #f5dada;
      
      /* Shadows */
      --shadow-sm: 0 1px 3px rgba(10,20,40,0.08);
      --shadow-md: 0 4px 16px rgba(10,20,40,0.12);
      --shadow-lg: 0 12px 40px rgba(10,20,40,0.18);
      
      /* Radii */
      --radius-sm: 0.375rem;
      --radius-md: 0.5rem;
      --radius-lg: 0.75rem;
      --radius-xl: 1rem;
      --radius-full: 9999px;
      
      /* Transitions */
      --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
      
      /* Type */
      --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
      --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
      --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
      --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
      --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
      --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
      --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
      --text-hero: clamp(3rem, 0.5rem + 7vw, 8rem);
      
      /* Spacing */
      --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
      --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
      --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
      --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
      
      /* Fonts */
      --font-display: 'Cormorant Garamond', Georgia, serif;
      --font-body: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
      
      /* Content widths */
      --content-narrow: 640px;
      --content-default: 960px;
      --content-wide: 1200px;
    }
    
    [data-theme="dark"] {
      --color-bg: #0f0f0d;
      --color-surface: #141210;
      --color-surface-2: #1a1815;
      --color-surface-3: #000;
      --color-surface-offset: #1e1c18;
      --color-divider: #282420;
      --color-border: #302c28;
      --color-text: #e8e4de;
      --color-text-muted: #8a8278;
      --color-text-faint: #504c48;
      --color-text-inverse: #141210;
      --color-primary: #d0ccc6;
      --color-primary-hover: #e8e5e0;
      --color-primary-light: #2a2520;
      --color-accent: #d4a840;
      --color-accent-hover: #e8bc50;
      --color-accent-light: #2e2010;
      --color-ice: #c04040;
      --color-ice-hover: #d05050;
      --color-ice-light: #2e1010;
      --color-maroon: #c04040;
      --color-maroon-hover: #d05050;
      --color-maroon-light: #2e1010;
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
      --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
      --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
    }
    
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme]) {
        --color-bg: #0f0f0d;
        --color-surface: #141210;
        --color-surface-2: #1a1815;
        --color-surface-offset: #1e1c18;
        --color-divider: #282420;
        --color-border: #302c28;
        --color-text: #e8e4de;
        --color-text-muted: #8a8278;
        --color-text-faint: #504c48;
        --color-text-inverse: #141210;
        --color-primary: #d0ccc6;
        --color-primary-hover: #e8e5e0;
        --color-primary-light: #2a2520;
        --color-accent: #d4a840;
        --color-accent-hover: #e8bc50;
        --color-accent-light: #2e2010;
        --color-ice: #c04040;
        --color-ice-hover: #d05050;
        --color-ice-light: #2e1010;
        --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
        --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
        --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
      }
    }
    
    /* --- Base Reset --- */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html {
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      scroll-behavior: smooth;
      scroll-padding-top: 80px;
    }
    body {
      font-family: var(--font-body);
      font-size: var(--text-base);
      color: var(--color-text);
      background: var(--color-bg);
      line-height: 1.65;
      overflow-x: hidden;
    }
    img { display: block; max-width: 100%; height: auto; }
    button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
    a { color: inherit; text-decoration: none; }
    h1,h2,h3,h4 { text-wrap: balance; line-height: 1.15; }
    p, li { text-wrap: pretty; }
    ul { list-style: none; padding: 0; }
    
    :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); }
    
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { /* animation-duration: 0.01ms !important; */ !important; transition-duration: 0.01ms !important; }
    }

    
    /* --- Typography --- */
    .font-display { font-family: var(--font-display); }
    .text-xs { font-size: var(--text-xs); }
    .text-sm { font-size: var(--text-sm); }
    .text-base { font-size: var(--text-base); }
    .text-lg { font-size: var(--text-lg); }
    .text-xl { font-size: var(--text-xl); }
    .text-2xl { font-size: var(--text-2xl); }
    .text-3xl { font-size: var(--text-3xl); }
    
    /* --- Layout --- */
    .container {
      max-width: var(--content-default);
      margin-inline: auto;
      padding-inline: var(--space-6);
    }
    .container--wide {
      max-width: var(--content-wide);
      margin-inline: auto;
      padding-inline: var(--space-6);
    }
    .container--narrow {
      max-width: var(--content-narrow);
      margin-inline: auto;
      padding-inline: var(--space-6);
    }