/* ============================================
   AGÊNCIA LUKA — Design Tokens
   Extraídos do Figma: F01NhAhpgJcU8tRbgUzWLe
   ============================================ */

:root {

  /* ── CORES BRAND ─────────────────────────── */
  --color-brand-blue:   #1e3a8a;
  --color-brand-green:  #10b981;
  --color-brand-violet: #6d28d9;
  --color-brand-orange: #f97316;
  --color-brand-gray:   #d1d5db;
  --color-dark:         #1a1a1a;
  --color-white:        #ffffff;

  /* ── GRADIENTES ──────────────────────────── */
  --gradient-icon: linear-gradient(225deg, var(--color-blue-50) 0%, #c6cfea 100%);

  /* ── ESCALA BLUE ─────────────────────────── */
  --color-blue-50:  #e9ebf8;
  --color-blue-100: #b9c2db;
  --color-blue-200: #98a4c9;
  --color-blue-300: #687bb1;
  --color-blue-400: #4b61a1;
  --color-blue-500: #1e3a8a;
  --color-blue-600: #1b357e;
  --color-blue-700: #152962;
  --color-blue-800: #11204c;
  --color-blue-900: #0d183a;

  /* ── ESCALA GREEN ────────────────────────── */
  --color-green-50:  #e7f8f2;
  --color-green-100: #b5e9d8;
  --color-green-200: #91dfc5;
  --color-green-300: #5fd0ab;
  --color-green-400: #40c79a;
  --color-green-500: #10b981;
  --color-green-600: #0fa875;
  --color-green-700: #0b835c;
  --color-green-800: #096647;
  --color-green-900: #074e36;

  /* ── ESCALA VIOLET ───────────────────────── */
  --color-violet-50:  #f0eafb;
  --color-violet-100: #d2bcf3;
  --color-violet-200: #bc9cee;
  --color-violet-300: #9d6fe6;
  --color-violet-400: #8a53e1;
  --color-violet-500: #6d28d9;
  --color-violet-600: #6324c5;
  --color-violet-700: #4d1c9a;
  --color-violet-800: #3c1677;
  --color-violet-900: #2e115b;

  /* ── ESCALA ORANGE ───────────────────────── */
  --color-orange-50:  #fef1e8;
  --color-orange-100: #fdd4b7;
  --color-orange-200: #fcbf94;
  --color-orange-300: #fba163;
  --color-orange-400: #fa8f45;
  --color-orange-500: #f97316;
  --color-orange-600: #e36914;
  --color-orange-700: #b15210;
  --color-orange-800: #893f0c;
  --color-orange-900: #693009;

  /* ── ESCALA GRAY ─────────────────────────── */
  --color-gray-50:  #f3f3f4;
  --color-gray-100: #d9dbdc;
  --color-gray-200: #c6c9cb;
  --color-gray-300: #adb1b3;
  --color-gray-400: #9da1a5;
  --color-gray-500: #848a8e;
  --color-gray-600: #787e81;
  --color-gray-700: #5e6265;
  --color-gray-800: #494c4e;
  --color-gray-900: #373a3c;

  /* ── TIPOGRAFIA ──────────────────────────── */
  --font-family: 'Poppins', sans-serif;

  /* Escala fluida: interpola entre 390px (mobile) e 1440px (desktop) */
  --font-size-display: clamp(48px, 39.09px + 2.29vw, 72px);
  --font-size-h1:      clamp(40px, 34.06px + 1.52vw, 56px);
  --font-size-h2:      clamp(32px, 26.06px + 1.52vw, 48px);
  --font-size-h3:      clamp(28px, 23.54px + 1.14vw, 40px);
  --font-size-h4:      clamp(24px, 21.03px + 0.76vw, 32px);
  --font-size-h5:      clamp(20px, 17.77px + 0.57vw, 26px);
  --font-size-h6:      clamp(18px, 16.51px + 0.38vw, 22px);
  --font-size-large:   clamp(18px, 17.26px + 0.19vw, 20px);
  --font-size-medium:  clamp(16px, 15.26px + 0.19vw, 18px);
  --font-size-regular: clamp(15px, 14.63px + 0.10vw, 16px);
  --font-size-small:   clamp(13px, 12.63px + 0.10vw, 14px);
  --font-size-tiny:    12px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.2;
  --line-height-snug:    1.25;
  --line-height-normal:  1.3;
  --line-height-relaxed: 1.35;
  --line-height-loose:   1.5;

  --letter-spacing-tight:    -0.005em;
  --letter-spacing-tighter:  -0.004em;
  --letter-spacing-normal:   0em;
  --letter-spacing-wide:     0.08em;

  /* ── ESPAÇAMENTOS ────────────────────────── */
  --space-0:   0px;
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-32:  32px;
  --space-40:  40px;
  --space-48:  48px;
  --space-64:  64px;
  --space-80:  80px;
  --space-96:  96px;
  --space-120: 120px;

  /* ── BORDER RADIUS ───────────────────────── */
  --radius-none: 0px;
  --radius-2:    2px;
  --radius-4:    4px;
  --radius-6:    6px;
  --radius-8:    8px;
  --radius-12:   12px;
  --radius-16:   16px;
  --radius-20:   20px;
  --radius-24:   24px;
  --radius-32:   32px;
  --radius-full: 9999px;

  /* ── LAYOUT GRID (extraído do Figma) ────────
     Desktop  1440px: 12 cols · 80px/col · gutter 24px · margin 108px (CENTER)
     Tablet    768px:  8 cols · gutter 24px · margin 32px (STRETCH)
     Mobile    393px:  4 cols · gutter 16px · margin 24px (STRETCH)
  ─────────────────────────────────────────── */
  --grid-cols-desktop: 12;
  --grid-cols-tablet:   8;
  --grid-cols-mobile:   4;

  --grid-gutter-desktop: 24px;
  --grid-gutter-tablet:  24px;
  --grid-gutter-mobile:  16px;

  --grid-margin-desktop: 108px;
  --grid-margin-tablet:  32px;
  --grid-margin-mobile:  24px;

  /* ── CONTAINER ───────────────────────────── */
  --container-max: 1440px;
  --container-padding: var(--grid-margin-desktop);

  /* ── SOMBRAS ─────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(30,58,138,0.06), 0 1px 2px rgba(30,58,138,0.04);
  --shadow-md:  0 4px 12px rgba(30,58,138,0.08), 0 2px 4px rgba(30,58,138,0.05);
  --shadow-lg:  0 12px 32px rgba(30,58,138,0.12), 0 4px 8px rgba(30,58,138,0.06);
  --shadow-xl:  0 24px 48px rgba(30,58,138,0.16), 0 8px 16px rgba(30,58,138,0.08);

  /* ── TRANSIÇÕES ──────────────────────────── */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}