/* ═══════════════════════════════════════════
   DESIGN TOKENS — variables.css
   Harbor & Helm theme
   ════════════════════════════════════════════ */

:root {
  /* ── Primary (deep nautical navy) ── */
  --color-primary:       #0A1F33;
  --color-primary-light: #142E4A;
  --color-primary-mid:   #1D4268;

  /* ── Accent (nautical brass / gold) ── */
  --color-accent:        #B8842A;
  --color-accent-dark:   #9A6C1F;
  --color-accent-light:  #F2E4C4;
  --color-accent-rgb:    184, 132, 42;

  /* ── Neutrals (warm coastal tones) ── */
  --color-white:    #ffffff;
  --color-gray-50:  #F7F3EE;
  --color-gray-100: #EDE8DF;
  --color-gray-200: #DDD6CA;
  --color-gray-300: #C8BEAE;
  --color-gray-400: #A39585;
  --color-gray-500: #7D6E5E;
  --color-gray-600: #5E5044;
  --color-gray-700: #42362C;
  --color-gray-800: #2B2118;
  --color-gray-900: #1A130D;

  /* ── Semantic ── */
  --color-success:      #1A7A4A;
  --color-success-bg:   #D4EEE0;
  --color-warning:      #C07A10;
  --color-warning-bg:   #FDF0D5;
  --color-danger:       #C0352A;
  --color-danger-bg:    #FAE0DE;
  --color-danger-dark:  #A02820;
  --color-info:         #1D5FA6;
  --color-info-bg:      #D6E7F8;

  /* ── Surface ── */
  --color-bg:           #F5F1EB;
  --color-surface:      var(--color-white);
  --color-surface-2:    var(--color-gray-100);
  --color-border:       var(--color-gray-200);
  --color-border-focus: var(--color-accent);
  --color-text:         #1A2C3D;
  --color-text-muted:   #5B6E80;
  --color-text-subtle:  #8A9BAB;

  /* ── Sidebar ── */
  --sidebar-bg:        var(--color-primary);
  --sidebar-width:     240px;
  --sidebar-collapsed: 64px;
  --sidebar-text:      #A8BCD0;
  --sidebar-text-active: #ffffff;
  --sidebar-hover-bg:  rgba(255,255,255,0.06);
  --sidebar-active-bg: rgba(184,132,42,0.18);

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(10,31,51,0.05);
  --shadow-sm: 0 1px 3px rgba(10,31,51,0.10), 0 1px 2px rgba(10,31,51,0.07);
  --shadow-md: 0 4px 8px rgba(10,31,51,0.09), 0 2px 4px rgba(10,31,51,0.07);
  --shadow-lg: 0 10px 28px rgba(10,31,51,0.12), 0 4px 10px rgba(10,31,51,0.07);
  --shadow-xl: 0 20px 50px rgba(10,31,51,0.18), 0 8px 20px rgba(10,31,51,0.10);
  --shadow-accent: 0 0 0 3px rgba(184,132,42,0.28);
  --shadow-inset: inset 0 1px 2px rgba(10,31,51,0.07);

  /* ── Radii ── */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 9999px;

  /* ── 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;

  /* ── Typography ── */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index ── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
  --z-overlay:  500;

  /* ── Layout ── */
  --header-height: 64px;
  --content-max:   1400px;
}