/* ==========================================================================
   Turing Consultores — Design Tokens
   Shared CSS custom properties for Landing Page and Sales Deck
   ========================================================================== */

:root {
  /* === Color System === */
  --color-primary: #1B2A4A;          /* Navy Blue */
  --color-primary-light: #2A3F6B;    /* Navy lighter variant */
  --color-primary-dark: #0F1A2E;     /* Navy darker variant */
  --color-secondary-white: #FFFFFF;
  --color-secondary-gray: #F5F6F8;   /* Light gray backgrounds */
  --color-secondary-gray-mid: #E8EAF0; /* Dividers, borders */
  --color-accent: #D4A853;           /* Gold/amber primary — RETIRED from interactive use (LEC calc) */
  --color-accent-hover: #C09540;     /* Gold/amber hover — RETIRED from interactive use (LEC calc) */
  --color-accent-light: #F5EDD8;     /* Gold/amber tint for backgrounds */

  /* === Brand accent from the live site (turingconsultores.com.ar) === */
  --color-brand: #1C92FF;            /* bright blue — primary brand accent (non-text) */
  --color-brand-strong: #1477D6;     /* darkened blue for AA text/hover */
  --color-brand-light: #8BC7FF;      /* light blue — badges/hero, requires DARK text */

  /* === Semantic action tokens (components reference these) === */
  --color-cta: #116FCB;              /* darkened brand blue — white text ~4.6:1 AA */
  --color-cta-hover: #0F63B4;        /* slightly darker for hover */
  --color-cta-contrast: #FFFFFF;     /* text on --color-cta (~4.6:1, AA) */
  --color-brand-light-contrast: #000000; /* text REQUIRED on --color-brand-light */

  /* === Semantic warning (amber) — encodes MEANING, distinct from retired brand gold === */
  --color-warning: #B7791F;          /* amber warning, AA on white (~4.6:1) */

  --color-text-primary: #1B2A4A;     /* Body text on light bg */
  --color-text-secondary: #4A5568;   /* Secondary text */
  --color-text-inverse: #FFFFFF;     /* Text on dark bg */
  --color-text-muted: #718096;       /* Captions, disclaimers */

  /* === Typography Scale === */
  --font-family-primary: 'Inter', 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Modular scale (1.25 ratio — Major Third) */
  --text-xs: 0.75rem;     /* 12px — disclaimers */
  --text-sm: 0.875rem;    /* 14px — captions */
  --text-base: 1rem;      /* 16px — body */
  --text-md: 1.125rem;    /* 18px — lead paragraphs */
  --text-lg: 1.25rem;     /* 20px — subheadings */
  --text-xl: 1.5rem;      /* 24px — section intros */
  --text-2xl: 1.875rem;   /* 30px — section titles */
  --text-3xl: 2.25rem;    /* 36px — page titles */
  --text-4xl: 3rem;       /* 48px — hero headline */
  --text-5xl: 3.75rem;    /* 60px — hero display */

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* === Spacing System (8px base unit) === */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 2.5rem;    /* 40px */
  --space-8: 3rem;      /* 48px */
  --space-9: 4rem;      /* 64px */
  --space-10: 5rem;     /* 80px */
  --space-11: 6rem;     /* 96px */
  --space-12: 8rem;     /* 128px */

  /* === Layout === */
  --max-width-content: 1200px;
  --max-width-text: 720px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;

  /* === Shadows === */
  --shadow-sm: 0 1px 3px rgba(27, 42, 74, 0.08);
  --shadow-md: 0 4px 12px rgba(27, 42, 74, 0.1);
  --shadow-lg: 0 8px 30px rgba(27, 42, 74, 0.12);
}