/* ==========================================================================

   TOWEMADE - CSS VARIABLES (Civic Atlas Editorial)

   Version: 4.0 - PAPER · INK · RULED

   Description: Centralized design tokens - colors, typography, spacing, shadows

   Date: 2025-12-08

   ========================================================================== */



:root {

  --paper: #F7F3EB;

  --paper-2: #EDE5D4;

  --paper-3: #E0D6C4;

  --ink: #1A1512;

  --ink-2: #3C3026;

  --ink-3: #7C6E5E;

  --accent: #B52D18;

  --green: #1C4D3A;

  --blue: #1D3470;

  --rule: #CCC3B2;

  --rule-2: #9E9080;

  --atlas-shadow: 0 2px 24px rgba(26,21,18,0.14), 0 1px 4px rgba(26,21,18,0.10);



  /* === COLORS - PRIMARY === */

  --color-primary: #B52D18;

  --color-primary-hover: #9A2413;

  --color-primary-active: #821D10;

  --color-primary-light: rgba(181, 45, 24, 0.15);

  --color-primary-lighter: rgba(181, 45, 24, 0.08);

  --color-primary-lightest: #F7E7E2;

  --color-primary-dark: #821D10;

  --color-primary-darker: #61140B;



  /* === COLORS - SECONDARY === */

  --color-secondary: #1D3470;

  --color-secondary-hover: #162A59;

  --color-secondary-active: #102045;

  --color-secondary-light: rgba(29, 52, 112, 0.15);

  --color-secondary-lighter: rgba(29, 52, 112, 0.08);

  --color-secondary-lightest: #E7ECF8;



  /* === COLORS - ACCENT === */

  --color-accent: #1C4D3A;

  --color-accent-hover: #163C2E;

  --color-accent-active: #0F2B21;

  --color-accent-light: rgba(28, 77, 58, 0.15);

  --color-accent-lighter: rgba(28, 77, 58, 0.08);



  /* === COLORS - SEMANTIC === */

  --color-success: #1C4D3A;

  --color-success-hover: #163C2E;

  --color-success-light: rgba(28, 77, 58, 0.15);

  --color-success-lighter: rgba(28, 77, 58, 0.08);



  --color-warning: #B52D18;

  --color-warning-hover: #9A2413;

  --color-warning-light: rgba(181, 45, 24, 0.15);

  --color-warning-lighter: rgba(181, 45, 24, 0.08);



  --color-danger: #B52D18;

  --color-danger-hover: #9A2413;

  --color-danger-light: rgba(181, 45, 24, 0.15);

  --color-danger-lighter: rgba(181, 45, 24, 0.08);



  --color-info: #1D3470;

  --color-info-hover: #162A59;

  --color-info-light: rgba(29, 52, 112, 0.15);

  --color-info-lighter: rgba(29, 52, 112, 0.08);



  /* === COLORS - NEUTRAL === */

  --color-white: #F7F3EB;

  --color-black: #1A1512;

  --color-gray-50: #F7F3EB;

  --color-gray-100: #EDE5D4;

  --color-gray-200: #E0D6C4;

  --color-gray-300: #CCC3B2;

  --color-gray-400: #9E9080;

  --color-gray-500: #7C6E5E;

  --color-gray-600: #5A4E41;

  --color-gray-700: #3C3026;

  --color-gray-800: #2A201A;

  --color-gray-900: #1A1512;



  /* === COLORS - BACKGROUND === */

  --bg-primary: #F7F3EB;

  --bg-secondary: #EDE5D4;

  --bg-tertiary: #E0D6C4;

  --bg-elevated: #F7F3EB;

  --bg-overlay: rgba(26, 21, 18, 0.5);

  --bg-hover: #EDE5D4;



  /* === COLORS - TEXT === */

  --text-primary: #1A1512;

  --text-secondary: #3C3026;

  --text-tertiary: #7C6E5E;

  --text-inverse: #F7F3EB;

  --text-link: #B52D18;

  --text-link-hover: #9A2413;



  /* === COLORS - BORDER === */

  --border-color: #CCC3B2;

  --border-color-light: #E0D6C4;

  --border-color-dark: #9E9080;

  --border-color-hover: #9E9080;

  --border-color-focus: #B52D18;

  --divider-color: #CCC3B2;



  /* === GRADIENTS === */

  --gradient-primary: linear-gradient(135deg, #B52D18 0%, #D05B43 100%);

  --gradient-secondary: linear-gradient(135deg, #1D3470 0%, #375598 100%);

  --gradient-success: linear-gradient(135deg, #1C4D3A 0%, #2D6A53 100%);

  --gradient-hero: linear-gradient(135deg, #F7F3EB 0%, #EDE5D4 50%, #E0D6C4 100%);

  --gradient-dark: linear-gradient(180deg, #F7F3EB 0%, #EDE5D4 100%);



  /* === TYPOGRAPHY - FONT FAMILIES === */

  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --font-family-headings: 'DM Serif Display', Georgia, serif;

  --font-family-monospace: 'IBM Plex Mono', "JetBrains Mono", Consolas, monospace;



  /* === TYPOGRAPHY - FONT SIZES === */

  --font-size-xs: 0.75rem;

  --font-size-sm: 0.875rem;

  --font-size-base: 1rem;

  --font-size-lg: 1.125rem;

  --font-size-xl: 1.25rem;

  --font-size-2xl: 1.5rem;

  --font-size-3xl: 1.875rem;

  --font-size-4xl: 2.25rem;

  --font-size-5xl: 3rem;

  --font-size-6xl: 3.75rem;



  /* === TYPOGRAPHY - FONT WEIGHTS === */

  --font-weight-light: 300;

  --font-weight-normal: 400;

  --font-weight-medium: 500;

  --font-weight-semibold: 600;

  --font-weight-bold: 700;

  --font-weight-extrabold: 800;



  /* === TYPOGRAPHY - LINE HEIGHTS === */

  --line-height-tight: 1.25;

  --line-height-snug: 1.375;

  --line-height-normal: 1.5;

  --line-height-relaxed: 1.75;

  --line-height-loose: 2;



  /* === SPACING SCALE (4px base) === */

  --spacing-0: 0;

  --spacing-1: 0.25rem;

  --spacing-2: 0.5rem;

  --spacing-3: 0.75rem;

  --spacing-4: 1rem;

  --spacing-5: 1.25rem;

  --spacing-6: 1.5rem;

  --spacing-8: 2rem;

  --spacing-10: 2.5rem;

  --spacing-12: 3rem;

  --spacing-16: 4rem;

  --spacing-20: 5rem;

  --spacing-24: 6rem;



  /* === BORDER RADIUS === */

  --radius-none: 0;

  --radius-sm: 0.25rem;

  --radius-md: 0.5rem;

  --radius-lg: 0.75rem;

  --radius-xl: 1rem;

  --radius-2xl: 1.5rem;

  --radius-3xl: 2rem;

  --radius-full: 9999px;



  /* === SHADOWS === */

  --shadow-xs: 0 1px 2px 0 rgba(26, 21, 18, 0.05);

  --shadow-sm: 0 1px 3px 0 rgba(26, 21, 18, 0.1), 0 1px 2px -1px rgba(26, 21, 18, 0.1);

  --shadow-md: 0 4px 6px -1px rgba(26, 21, 18, 0.1), 0 2px 4px -2px rgba(26, 21, 18, 0.1);

  --shadow-lg: 0 10px 15px -3px rgba(26, 21, 18, 0.1), 0 4px 6px -4px rgba(26, 21, 18, 0.1);

  --shadow-xl: 0 20px 25px -5px rgba(26, 21, 18, 0.1), 0 8px 10px -6px rgba(26, 21, 18, 0.1);

  --shadow-2xl: 0 25px 50px -12px rgba(26, 21, 18, 0.25);

  --shadow-inner: inset 0 2px 4px 0 rgba(26, 21, 18, 0.05);

  --shadow-glow: none;



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

  --z-index-dropdown: 1000;

  --z-index-sticky: 1020;

  --z-index-fixed: 1030;

  --z-index-modal-backdrop: 1040;

  --z-index-modal: 1050;

  --z-index-popover: 1060;

  --z-index-tooltip: 1070;



  /* === TRANSITIONS === */

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);

  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);



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

  --breakpoint-xs: 320px;

  --breakpoint-sm: 640px;

  --breakpoint-md: 768px;

  --breakpoint-lg: 1024px;

  --breakpoint-xl: 1280px;

  --breakpoint-2xl: 1536px;

  --breakpoint-4k: 2560px;



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

  --container-sm: 640px;

  --container-md: 768px;

  --container-lg: 1024px;

  --container-xl: 1280px;

  --container-2xl: 1536px;

  --container-max: 1280px;



  /* === LAYOUT === */

  --header-height: 68px;

  --sidebar-width: 290px;

  --sidebar-collapsed-width: 60px;

  --bottom-nav-height: 80px;

  --surface-glass: #F7F3EB;

  --surface-strong: #EDE5D4;

  --glow-primary: transparent;

  --glow-secondary: transparent;

}



/* ==========================================================================

   PREFERS REDUCED MOTION

   ========================================================================== */



@media (prefers-reduced-motion: reduce) {

  :root {

    --transition-fast: 0ms;

    --transition-base: 0ms;

    --transition-slow: 0ms;

    --transition-slower: 0ms;

    --transition-bounce: 0ms;

  }



  *,

  *::before,

  *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

  }

}