/**
 * lucode_ Design System
 *
 * Global design system variables.
 * This file defines all design tokens used in the theme.
 *
 * To customize for a client:
 * 1. Change main colors
 * 2. Change typography
 * 3. Adjust spacing if needed
 */

:root {
  /* ==================== COLORS ==================== */

  /* Main colors */
  --color-primary: #25344C;
  --color-secondary: #556070;
  --color-accent: #E66A34;
  --color-accent-soft: #FFB48A;
  --color-peach: #FFB48A;

  /* Backgrounds */
  --color-bg-primary: #F5F2EC;
  --color-bg-white: #FFFFFF;
  --color-bg-dark: #25344C;

  /* Navy */
  --color-navy: #25344C;

  /* WhatsApp */
  --color-whatsapp: #25D366;

  /* Text */
  --color-text-primary: #25344C;
  --color-text-secondary: #556070;
  --color-text-light: #C8D0DA;

  /* Borders */
  --color-border: #E2E0DA;

  /* States */
  --color-success: #28A745;
  --color-error: #DC3545;
  --color-warning: #FFC107;
  --color-info: #17A2B8;

  /* ==================== TYPOGRAPHY ==================== */

  /* Font families */
  --font-display: 'Playfair Display', serif;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'Courier New', monospace;

  /* Font sizes - Fluid scale with clamp() (min@360px → max@1280px) */
  --font-size-xs:   clamp(0.75rem,  0.22vw + 0.70rem, 0.875rem);  /* 12→14px */
  --font-size-sm:   clamp(0.875rem, 0.22vw + 0.83rem, 1rem);      /* 14→16px */
  --font-size-base: clamp(1rem,     0.22vw + 0.95rem, 1.125rem);  /* 16→18px */
  --font-size-lg:   clamp(1.125rem, 0.22vw + 1.08rem, 1.25rem);   /* 18→20px */
  --font-size-xl:   clamp(1.25rem,  0.43vw + 1.15rem, 1.5rem);    /* 20→24px */
  --font-size-2xl:  clamp(1.375rem, 0.87vw + 1.18rem, 1.875rem);  /* 22→30px */
  --font-size-3xl:  clamp(1.625rem, 1.09vw + 1.38rem, 2.25rem);   /* 26→36px */
  --font-size-4xl:  clamp(1.75rem,  0.87vw + 1.55rem, 2.25rem);   /* 28→36px */
  --font-size-5xl:  clamp(2rem,     1.74vw + 1.38rem, 3rem);      /* 32→48px */
  --font-size-6xl:  clamp(2.25rem,  2.61vw + 1.32rem, 3.75rem);   /* 36→60px */
  --font-size-7xl:  clamp(2.5rem,   3.48vw + 1.72rem, 4.5rem);    /* 40→72px */

  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* 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;
  --font-weight-black: 900;

  /* ==================== SPACING ==================== */

  /* Spacing scale - 8px base */
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* Section spacing */
  --section-spacing-sm: var(--space-16);
  --section-spacing-xl: var(--space-32);

  /* Section padding - fluid */
  --section-py: clamp(4rem, 2.41vw + 3.46rem, 5rem);     /* 64→80px */
  --section-py-lg: clamp(5rem, 2.17vw + 4.22rem, 6rem);  /* 80→96px */

  /* ==================== LAYOUT ==================== */

  /* Container */
  --container-max: 1280px;
  --container-padding: var(--space-6);
  --container-px: 32px;
  --container-px-lg: 48px;

  /* ==================== BORDERS ==================== */

  /* Border radius */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-full: 9999px;
  --radius-card: 16px;
  --radius-input: 8px;

  /* ==================== SHADOWS ==================== */

  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);

  /* Neo-brutalist shadows */
  --shadow-brutal: 3px 3px 0px 0px rgba(37, 52, 76, 1);
  --shadow-brutal-lg: 5px 5px 0px 0px rgba(37, 52, 76, 1);
  --shadow-brutal-xl: 8px 8px 0px 0px rgba(37, 52, 76, 1);

  /* Card shadows */
  --shadow-card: 0 8px 32px rgba(37, 52, 76, 0.08);
  --shadow-card-hover: 0 12px 40px rgba(37, 52, 76, 0.12);
  --shadow-subtle: 0 4px 16px rgba(37, 52, 76, 0.04);
  --shadow-subtle-hover: 0 6px 20px rgba(37, 52, 76, 0.08);

  /* ==================== TRANSITIONS ==================== */

  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

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

  --z-dropdown: 1000;

  /* ==================== GRID BACKGROUND ==================== */

  --grid-bg: linear-gradient(to right, rgba(37, 52, 76, 0.025) 1px, transparent 1px),
             linear-gradient(to bottom, rgba(37, 52, 76, 0.025) 1px, transparent 1px);
  --grid-size: 80px 80px;
}

/* ==================== RESPONSIVE BREAKPOINTS ==================== */
/*
 * We use a mobile-first approach
 * sm: 640px  |  md: 768px  |  lg: 1024px  |  xl: 1280px  |  2xl: 1536px
 */