/* ============================================
   TAVLO DESIGN TOKENS - "Luce" Design System
   ============================================
   Version: 3.0 | April 2026
   Edit ONLY this file to restyle the entire site.
   ============================================ */

:root {
  /* ---- 1. COLOR PALETTE (raw swatches) ---- */
  --pal-white: #FFFFFF;
  --pal-cream: #FAFAF8;
  --pal-warm-50: #F5F4F1;
  --pal-warm-100: #EDECE9;
  --pal-warm-200: #E0DED9;
  --pal-warm-300: #C8C5BF;
  --pal-warm-400: #A8A59E;
  --pal-warm-500: #87847D;
  --pal-warm-600: #6B6862;
  --pal-warm-700: #4A4843;
  --pal-warm-800: #2E2D2A;
  --pal-warm-900: #1A1918;

  /* ---- 2. ACCENT COLORS ---- */
  --pal-amber: #E39214;
  --pal-amber-soft: #E9A73D;
  --pal-amber-pale: #F7EED8;
  --pal-blue: #4A7CCC;
  --pal-teal: #3A9B82;
  --pal-rose: #C28A7A;
  --pal-violet: #8B6BB5;

  /* ---- 3. PRODUCT ACCENTS ---- */
  --product-perspicuum: var(--pal-amber);
  --product-connexa: var(--pal-blue);
  --product-praxis: var(--pal-teal);
  --product-veritas: var(--pal-violet);

  /* ---- 4. PEOPLE ACCENTS ---- */
  --people-a: var(--pal-amber);
  --people-b: var(--pal-blue);
  --people-c: var(--pal-teal);
  --people-d: var(--pal-rose);
  --people-e: var(--pal-violet);

  /* ---- 5. SEMANTIC COLORS ---- */
  --bg: var(--pal-cream);
  --bg-elevated: var(--pal-white);
  --bg-glass: rgba(255,255,255,0.55);
  --bg-glass-solid: rgba(255,255,255,0.85);
  --bg-alt: var(--pal-warm-50);
  --text: var(--pal-warm-900);
  --text-2: var(--pal-warm-600);
  --text-3: var(--pal-warm-400);
  --accent: var(--pal-amber);
  --accent-hover: var(--pal-amber-soft);
  --accent-bg: var(--pal-amber-pale);
  --border: rgba(0,0,0,0.05);
  --border-hover: rgba(0,0,0,0.1);

  /* ---- 6. MEGA-MENU TOKENS ---- */
  --megamenu-bg: var(--pal-white);
  --megamenu-shadow: 0 12px 48px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  --megamenu-border: var(--border);
  --megamenu-category-color: var(--text-3);
  --megamenu-link-color: var(--text);
  --megamenu-link-hover: var(--accent);

  /* ---- 7. HERO SLIDER TOKENS ---- */
  --slider-speed: 6s;
  --slider-transition: 0.8s;
  --slider-dot-size: 10px;
  --slider-dot-active: var(--accent);
  --slider-dot-inactive: var(--pal-warm-300);

  /* ---- 8. TYPOGRAPHY ---- */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --ts-2xs: 0.625rem;   /* 10px */
  --ts-xs: 0.75rem;     /* 12px */
  --ts-sm: 0.875rem;    /* 14px */
  --ts-base: 1rem;      /* 16px - body default */
  --ts-lg: 1.125rem;    /* 18px */
  --ts-xl: 1.25rem;     /* 20px */
  --ts-2xl: 1.5rem;     /* 24px */
  --ts-3xl: 2rem;       /* 32px */
  --ts-4xl: 2.5rem;     /* 40px */
  --ts-5xl: 3.5rem;     /* 56px */
  --ts-hero: 4rem;      /* 64px - hero headline */
  /* Legacy aliases (keep backward compat) */
  --text-xs: var(--ts-xs);
  --text-sm: var(--ts-sm);
  --text-base: var(--ts-base);
  --text-lg: var(--ts-lg);
  --text-xl: var(--ts-xl);
  --text-2xl: var(--ts-2xl);
  --text-3xl: var(--ts-3xl);
  --text-4xl: var(--ts-4xl);
  --text-5xl: var(--ts-5xl);
  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ---- 9. SPACING (8px grid) ---- */
  --s1: 0.25rem;     /* 4px */
  --s2: 0.5rem;      /* 8px */
  --s3: 0.75rem;     /* 12px */
  --s4: 1rem;        /* 16px */
  --s6: 1.5rem;      /* 24px */
  --s8: 2rem;        /* 32px */
  --s10: 2.5rem;     /* 40px */
  --s12: 3rem;       /* 48px */
  --s16: 4rem;       /* 64px */
  --s20: 5rem;       /* 80px */
  --s24: 6rem;       /* 96px */
  --s32: 8rem;       /* 128px */
  --s48: 12rem;      /* 192px */
  /* Legacy aliases */
  --space-1: var(--s1);
  --space-2: var(--s2);
  --space-3: var(--s3);
  --space-4: var(--s4);
  --space-6: var(--s6);
  --space-8: var(--s8);
  --space-10: var(--s10);
  --space-12: var(--s12);
  --space-16: var(--s16);
  --space-20: var(--s20);
  --space-24: var(--s24);
  --space-32: var(--s32);

  /* ---- 10. SHAPE (borders & radius) ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 16px;    /* cards */
  --radius-3xl: 20px;    /* large panels */
  --radius-full: 100px;  /* pills, avatars */
  --border-width: 1px;

  /* ---- 11. DEPTH (shadows & effects) ---- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.10);
  --shadow-glass: 0 4px 30px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.02);
  --blur-nav: 24px;

  /* ---- 12. MOTION ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.3s;
  --dur-slow: 0.4s;
  --dur-reveal: 0.9s;
  --reveal-y: 40px;
  --hover-lift: -3px;
  --marquee-speed: 35s;

  /* ---- 13. LAYOUT ---- */
  --max-w: 1280px;
  --max-w-text: 700px;
  --max-w-narrow: 520px;
  --section-py: 6rem;        /* 96px vertical padding per section */
  --section-py-sm: var(--s16); /* 64px for sub-page sections */
  --grid-gap: 1.5rem;
  --nav-height: 64px;

  /* ---- 14. Z-INDEX ---- */
  --z-base: 1;
  --z-sticky: 100;
  --z-megamenu: 150;
  --z-nav: 200;
  --z-modal: 300;
  --z-cookie: 400;
}

/* ---- DARK MODE OVERRIDES ---- */