/* ============================================================
   NOC DEVELOPMENT — Design Tokens
   Palette 4: NOC Brand Light (White/Beige + Red)
   ============================================================ */

:root {
  /* Brand */
  --red:          #c0392b;
  --red-dark:     #962d22;
  --red-mid:      #d44333;
  --red-light:    #fdf0ee;
  --red-pale:     #faf5f4;

  /* Neutrals */
  --black:        #1a1918;
  --charcoal:     #2d2b29;
  --gray-700:     #4a4845;
  --gray-500:     #6b6866;
  --gray-400:     #8c8a88;
  --gray-300:     #b8b6b4;
  --gray-100:     #e8e5e1;
  --gray-50:      #f3f1ed;

  /* Backgrounds */
  --bg:           #fefcf9;
  --bg-2:         #f8f5f0;
  --bg-3:         #f0ece5;
  --white:        #ffffff;

  /* Border */
  --border:       #e2ddd6;
  --border-light: #ece9e3;

  /* Typography */
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Outfit', 'DM Sans', system-ui, sans-serif;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 104px;
  --space-11: 128px;

  /* Container */
  --container: 1280px;
  --gutter:    80px;

  /* Radius */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 8px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(26,25,24,0.06), 0 1px 2px rgba(26,25,24,0.04);
  --shadow:    0 4px 16px rgba(26,25,24,0.08), 0 2px 6px rgba(26,25,24,0.04);
  --shadow-lg: 0 12px 40px rgba(26,25,24,0.10), 0 4px 12px rgba(26,25,24,0.06);

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  220ms;
}

@media (max-width: 1024px) {
  :root { --gutter: 48px; }
}
@media (max-width: 768px) {
  :root { --gutter: 20px; }
}