/* ============================================================
   VISA ABORDO CONSULTING — DESIGN TOKENS
   Single source of truth for every visual decision.
   Consumed by base.css, components.css, and all pages.
   ============================================================ */

:root {

  /* ── BRAND COLORS ──────────────────────────────────────── */

  /* Primary — Institutional Blue */
  --color-primary-50:  #EBF1F9;
  --color-primary-100: #C6D6EC;
  --color-primary-200: #9DBADE;
  --color-primary-300: #739ED1;
  --color-primary-400: #4982C3;
  --color-primary-500: #214F86;   /* ← Brand Blue (logo) */
  --color-primary-600: #1A3F6B;
  --color-primary-700: #143050;
  --color-primary-800: #0D2035;
  --color-primary-900: #07101A;

  /* Secondary — Turquoise accent */
  --color-accent-50:  #E8F9F9;
  --color-accent-100: #C2EFF0;
  --color-accent-200: #9CE5E6;
  --color-accent-300: #76DBDB;
  --color-accent-400: #5AD3D1;   /* ← Brand Turquoise (logo) */
  --color-accent-500: #3CBAB8;
  --color-accent-600: #2E9694;
  --color-accent-700: #227270;
  --color-accent-800: #164E4C;
  --color-accent-900: #0A2A28;

  /* Neutrals */
  --color-white:     #FFFFFF;
  --color-gray-50:   #F6F8FA;
  --color-gray-100:  #EBEEF2;
  --color-gray-200:  #D4D9E0;
  --color-gray-300:  #B8C0CC;
  --color-gray-400:  #9BA5B0;
  --color-gray-500:  #7E8A97;
  --color-gray-600:  #6B7280;
  --color-gray-700:  #4B5563;
  --color-gray-800:  #374151;
  --color-gray-900:  #1F2937;

  /* Status */
  --color-success:    #10B981;
  --color-success-bg: #ECFDF5;
  --color-warning:    #F59E0B;
  --color-warning-bg: #FFFBEB;
  --color-error:      #EF4444;
  --color-error-bg:   #FEF2F2;

  /* ── SEMANTIC ALIASES ──────────────────────────────────── */

  --brand-primary:       var(--color-primary-500);
  --brand-primary-hover: var(--color-primary-600);
  --brand-accent:        var(--color-accent-400);
  --brand-accent-hover:  var(--color-accent-500);

  --bg-page:    var(--color-white);
  --bg-surface: var(--color-gray-50);
  --bg-raised:  var(--color-white);

  --border-default: var(--color-gray-200);
  --border-subtle:  var(--color-gray-100);

  --text-primary:     var(--color-gray-900);
  --text-secondary:   var(--color-gray-600);
  --text-placeholder: var(--color-gray-400);
  --text-inverse:     var(--color-white);

  /* ── TYPOGRAPHY ────────────────────────────────────────── */

  --font-heading: 'Sora', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Scale (mobile-first — clamp applied where needed) */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.25rem;    /* 20 */
  --text-2xl:  1.5rem;     /* 24 */
  --text-3xl:  1.875rem;   /* 30 */
  --text-4xl:  2.25rem;    /* 36 */
  --text-5xl:  3rem;       /* 48 */
  --text-6xl:  3.75rem;    /* 60 */
  --text-7xl:  4.5rem;     /* 72 */

  /* Weights */
  --fw-light:     300;
  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Line-heights */
  --lh-none:    1;
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  --lh-loose:   2;

  /* Letter-spacing */
  --ls-tight:   -0.03em;
  --ls-snug:    -0.015em;
  --ls-normal:   0em;
  --ls-wide:     0.03em;
  --ls-wider:    0.06em;
  --ls-widest:   0.12em;

  /* ── SPACING ────────────────────────────────────────────── */
  /* 4-px base grid */
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-7:  1.75rem;   /* 28 */
  --space-8:  2rem;      /* 32 */
  --space-9:  2.25rem;   /* 36 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-14: 3.5rem;    /* 56 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */
  --space-28: 7rem;      /* 112 */
  --space-32: 8rem;      /* 128 */

  /* ── BORDER RADIUS ─────────────────────────────────────── */
  --radius-sm:   0.25rem;   /*  4 */
  --radius-md:   0.5rem;    /*  8 */
  --radius-lg:   0.75rem;   /* 12 */
  --radius-xl:   1rem;      /* 16 */
  --radius-2xl:  1.5rem;    /* 24 */
  --radius-3xl:  2rem;      /* 32 */
  --radius-full: 9999px;

  /* ── SHADOWS ────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,.06);
  --shadow-sm:  0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
  --shadow-xl:  0 20px 48px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.08);
  --shadow-2xl: 0 32px 64px rgba(0,0,0,.15);

  /* Brand-tinted card hover */
  --shadow-card-hover: 0 16px 48px rgba(90,211,209,.18), 0 4px 16px rgba(33,79,134,.06);

  /* Focus rings */
  --shadow-focus:         0 0 0 3px rgba(90,211,209,.35);
  --shadow-focus-primary: 0 0 0 3px rgba(33,79,134,.22);
  --shadow-focus-error:   0 0 0 3px rgba(239,68,68,.22);

  /* ── TRANSITIONS ────────────────────────────────────────── */
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:    150ms;
  --dur-normal:  250ms;
  --dur-slow:    400ms;
  --dur-slower:  600ms;

  --t-colors:    color var(--dur-normal) var(--ease),
                 background-color var(--dur-normal) var(--ease),
                 border-color var(--dur-normal) var(--ease);
  --t-transform: transform var(--dur-normal) var(--ease);
  --t-shadow:    box-shadow var(--dur-normal) var(--ease);
  --t-all:       var(--t-colors), var(--t-transform), var(--t-shadow);

  /* ── Z-INDEX SCALE ──────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-sticky:  20;
  --z-fixed:   30;
  --z-overlay: 40;
  --z-modal:   50;
  --z-toast:   60;

  /* ── LAYOUT ─────────────────────────────────────────────── */
  --container-xl:  1200px;
  --container-2xl: 1400px;

  --navbar-height:          72px;
  --navbar-height-scrolled: 60px;

  /* ── GRADIENTS ──────────────────────────────────────────── */
  --gradient-hero:    linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-white) 38%, var(--color-accent-50) 68%, #F0FFFE 100%);
  --gradient-primary: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
  --gradient-accent:  linear-gradient(135deg, var(--color-accent-400) 0%, var(--color-accent-600) 100%);
  --gradient-blue-teal: linear-gradient(135deg, var(--color-primary-600) 0%, #136E7E 48%, var(--color-accent-600) 100%);
  --gradient-surface:    linear-gradient(180deg, var(--color-white) 0%, var(--color-gray-50) 100%);

  /* Soft mesh gradients — section backgrounds */
  --gradient-teal-mesh:  linear-gradient(135deg, var(--color-accent-50) 0%, var(--color-white) 55%, var(--color-primary-50) 100%);
  --gradient-soft-teal:  linear-gradient(160deg, #F0FFFE 0%, var(--color-accent-50) 45%, var(--color-white) 100%);
  --gradient-teal-deep:  linear-gradient(135deg, var(--color-accent-500) 0%, var(--color-accent-700) 100%);

  /* Decorative orb backgrounds (radial blobs) */
  --gradient-orb-teal:   radial-gradient(circle, rgba(90,211,209,.20) 0%, rgba(90,211,209,.05) 50%, transparent 72%);
  --gradient-orb-blue:   radial-gradient(circle, rgba(33,79,134,.10) 0%, rgba(33,79,134,.02) 50%, transparent 72%);
  --gradient-orb-glow:   radial-gradient(circle, rgba(90,211,209,.30) 0%, rgba(90,211,209,.08) 40%, transparent 68%);

  /* WhatsApp brand */
  --color-whatsapp: #25D366;
  --color-whatsapp-dark: #1DA851;
}