/* ============================================================
   ConsciencIA Design System — Tokens
   Versão: 1.0 | 2026-03
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

:root {

  /* ----------------------------------------------------------
     CORES BASE
  ---------------------------------------------------------- */

  /* Brand */
  --color-navy:       #0A0E1A;
  --color-navy-800:   #111827;
  --color-navy-700:   #1C2539;
  --color-navy-600:   #2D3A52;
  --color-navy-500:   #3E4F6B;

  --color-cyan:       #00D4FF;
  --color-cyan-600:   #00AACF;
  --color-cyan-400:   #33DDFF;
  --color-cyan-200:   #99EEFF;
  --color-cyan-100:   #CCFFFF;

  --color-white:      #FFFFFF;
  --color-gray-100:   #F3F5F8;
  --color-gray-200:   #E4E8EF;
  --color-gray-300:   #CDD3DE;
  --color-gray-400:   #A8B2C1;
  --color-gray:       #8892A4;
  --color-gray-600:   #5A6478;
  --color-gray-700:   #3C4456;

  /* ----------------------------------------------------------
     CORES DOS PRODUTOS
  ---------------------------------------------------------- */

  /* VoxIA — Recepcionista IA */
  --color-voxia:        #00D4FF;   /* cyan primário */
  --color-voxia-dark:   #0099CC;
  --color-voxia-light:  #E0FAFF;
  --color-voxia-glow:   rgba(0, 212, 255, 0.25);

  /* ProntoDoc — Automação de Prontuários */
  --color-prontodoc:        #00C896;
  --color-prontodoc-dark:   #009970;
  --color-prontodoc-light:  #E0FAF4;
  --color-prontodoc-glow:   rgba(0, 200, 150, 0.25);

  /* FluxIA — Assessor Financeiro */
  --color-fluxia:        #F59E0B;
  --color-fluxia-dark:   #D97706;
  --color-fluxia-light:  #FEF3C7;
  --color-fluxia-glow:   rgba(245, 158, 11, 0.25);

  /* CronicFIT — SaaS de Exercícios */
  --color-cronicfit:        #FF6B6B;
  --color-cronicfit-dark:   #E05555;
  --color-cronicfit-light:  #FFE8E8;
  --color-cronicfit-glow:   rgba(255, 107, 107, 0.25);

  /* ----------------------------------------------------------
     FEEDBACK
  ---------------------------------------------------------- */

  --color-success:  #00C896;
  --color-warning:  #F59E0B;
  --color-error:    #FF4D4D;
  --color-info:     #00D4FF;

  /* ----------------------------------------------------------
     TIPOGRAFIA
  ---------------------------------------------------------- */

  --font-heading: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Tamanhos */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */
  --text-8xl:  6rem;       /* 96px */
  --text-hero: 7rem;       /* 112px */

  /* Peso */
  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold: 800;

  /* Altura de linha */
  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* ----------------------------------------------------------
     ESPAÇAMENTO (base 4px)
  ---------------------------------------------------------- */

  --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 */

  /* ----------------------------------------------------------
     BORDER RADIUS
  ---------------------------------------------------------- */

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

  /* ----------------------------------------------------------
     SOMBRAS
  ---------------------------------------------------------- */

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.6);

  /* Glow dos produtos */
  --shadow-cyan-glow:      0 0 24px rgba(0, 212, 255, 0.4);
  --shadow-green-glow:     0 0 24px rgba(0, 200, 150, 0.4);
  --shadow-amber-glow:     0 0 24px rgba(245, 158, 11, 0.4);
  --shadow-coral-glow:     0 0 24px rgba(255, 107, 107, 0.4);

  /* ----------------------------------------------------------
     GRADIENTES
  ---------------------------------------------------------- */

  --gradient-brand:      linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-700) 100%);
  --gradient-cyan:       linear-gradient(135deg, #00D4FF 0%, #0099CC 100%);
  --gradient-hero:       linear-gradient(135deg, var(--color-navy) 0%, #0D1B35 50%, #0A0E1A 100%);
  --gradient-card:       linear-gradient(145deg, var(--color-navy-700) 0%, var(--color-navy-800) 100%);

  /* Gradientes por produto */
  --gradient-voxia:      linear-gradient(135deg, #00D4FF 0%, #0099CC 100%);
  --gradient-prontodoc:  linear-gradient(135deg, #00C896 0%, #009970 100%);
  --gradient-fluxia:     linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  --gradient-cronicfit:  linear-gradient(135deg, #FF6B6B 0%, #E05555 100%);

  /* ----------------------------------------------------------
     TRANSIÇÕES
  ---------------------------------------------------------- */

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

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

  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ----------------------------------------------------------
     BREAKPOINTS (referência para uso em media queries)
     sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1536px
  ---------------------------------------------------------- */

  --container-max: 1280px;
  --container-padding: var(--space-6);
}