/*
  KodNest Premium Build System
  ========================================
  Design Philosophy: Calm, Intentional, Coherent, Confident
  No gradients, no glassmorphism, no neon colors, no animation noise.
  Everything is designed with one coherent mind.
*/

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');

:root {
  /* ========== COLOR SYSTEM - Maximum 4 colors ==========
     A calm, intentional palette for premium B2C SaaS */
  /* Four colors only: background, text, accent, semantic (success/warning) */
  --color-background: #F7F6F3;
  --color-text-primary: #111111;
  --color-accent: #8B0000;
  --color-accent-hover: #660000;
  --color-text-secondary: #666666;
  --color-success: #5B8C5A;
  --color-warning: #C8963E;
  --color-white: #FFFFFF;
  --color-border: #E8E6E1;

  /* ========== TYPOGRAPHY - Serif confidence, Sans-serif clarity ==========
     Headings: Serif, large, confident, generous spacing
     Body: Sans-serif, 16-18px, line-height 1.6-1.8, max 720px */
  --font-headings: 'Merriweather', Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Heading sizes - confident and generous */
  --font-size-h1: 2.5rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.25rem;
  --font-size-body-large: 1.125rem;
  --font-size-body: 1rem;
  --font-size-small: 0.9375rem;
  --font-size-xs: 0.875rem;

  /* Line heights - generous for readability */
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

  /* Letter spacing */
  --letter-spacing-tight: -0.5px;
  --letter-spacing-normal: 0;
  --letter-spacing-relaxed: 0.5px;

  /* ========== SPACING SYSTEM - Consistent 8px scale ==========
     Never use random spacing like 13px, 27px, etc.
     Whitespace is part of the design. */
  --spacing-xs: 0.5rem;       /* 8px */
  --spacing-sm: 1rem;         /* 16px */
  --spacing-md: 1.5rem;       /* 24px */
  --spacing-lg: 2.5rem;       /* 40px */
  --spacing-xl: 4rem;         /* 64px */

  /* ========== COMPONENT TOKENS ==========
     Borders, radius, shadows - minimal and intentional */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --border-width: 1px;

  /* Shadows - minimal, never heavy */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);

  /* ========== INTERACTION & ANIMATION ==========
     Transitions: 150-200ms, ease-in-out, no bounce, no parallax */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 200ms ease-in-out;

  /* ========== LAYOUT SYSTEM ==========
     Global structure: Top Bar → Context Header → Primary + Secondary → Proof Footer */
  --top-bar-height: 64px;
  --footer-height: 64px;
  --width-primary: 70%;
  --width-secondary: 30%;
  --max-text-width: 45rem;     /* 720px - for text blocks */
  --max-container-width: 1440px;

  /* ========== RESPONSIVE BREAKPOINTS ========== */
  --viewport-mobile: 640px;
  --viewport-tablet: 1024px;
  --viewport-desktop: 1280px;
}