/*
 * NOVA AI Solutions — Design System v3
 * Tokens CSS
 *
 * Cole este arquivo no seu projeto ou importe via:
 *   @import url("tokens.css");
 *
 * Uso: var(--brand-green), var(--bg-card), etc.
 */

:root {

  /* ─── Fontes ─── */
  --font-gyrotrope:   "Gyrotrope", system-ui, -apple-system, sans-serif;
  --font-geist-sans:  "Geist", "Geist Sans", system-ui, sans-serif;
  --font-geist-mono:  "Geist Mono", "JetBrains Mono", monospace;

  /* ─── Cores de Marca ─── */
  --brand-blue:        #49AECC;
  --brand-blue-dark:   #3A8FA8;
  --brand-blue-light:  #6DC5DB;
  --brand-green:       #31D6AB;
  --brand-green-dark:  #28B08D;
  --brand-green-light: #5CE0C0;

  /* ─── Bases Dark ─── */
  --dark-bg:      #0a0f1e;
  --dark-section: #0d1726;
  --dark-card:    #111d30;

  /* ─── Neutros ─── */
  --neutral-light:     #f5f7fa;
  --neutral-primary:   #f0f4f8;
  --neutral-secondary: #a0aec0;

  /* ─── Semânticos — Tema Dark (padrão) ─── */
  --bg-body:    var(--dark-bg);
  --bg-surface: var(--dark-section);
  --bg-card:    var(--dark-card);
  --bg-section: var(--dark-section);

  --text-primary:   var(--neutral-primary);
  --text-secondary: var(--neutral-secondary);
  --text-inverse:   var(--dark-bg);

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-brand:  rgba(49, 214, 171, 0.3);

  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 20px rgb(49 214 171 / 0.25);

  /* ─── Espaçamento ─── */
  --space-4xs: 0.125rem;  /* 2px  */
  --space-3xs: 0.25rem;   /* 4px  */
  --space-2xs: 0.5rem;    /* 8px  */
  --space-xs:  0.75rem;   /* 12px */
  --space-sm:  1rem;      /* 16px */
  --space-md:  1.5rem;    /* 24px */
  --space-lg:  2rem;      /* 32px */
  --space-xl:  3rem;      /* 48px */
  --space-2xl: 4rem;      /* 64px */
  --space-3xl: 6rem;      /* 96px */
  --space-4xl: 8rem;      /* 128px */

  /* ─── Border Radius ─── */
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-2xl:  2.5rem;
  --radius-full: 9999px;

  /* ─── Easing ─── */
  --ease-smooth: cubic-bezier(0.4,  0,    0.2, 1);
  --ease-snap:   cubic-bezier(0.16, 1,    0.3, 1);
  --ease-spring: cubic-bezier(0.175,0.885,0.32,1.275);

  /* ─── Duração ─── */
  --duration-instant:  80ms;
  --duration-fast:    150ms;
  --duration-base:    200ms;
  --duration-slow:    350ms;
  --duration-slower:  500ms;
  --duration-sluggish:800ms;

  /* ─── Elevação — Dark ─── */
  --shadow-1: 0 1px  2px  rgba(0, 0, 0, 0.24);
  --shadow-2: 0 4px  8px  rgba(0, 0, 0, 0.28);
  --shadow-3: 0 8px  24px rgba(0, 0, 0, 0.34);
  --shadow-4: 0 20px 48px rgba(0, 0, 0, 0.42);

  /* ─── Z-index Semântico ─── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-popover:  500;
  --z-toast:    600;
}

/* ─── Tema Light ─── */
[data-theme="light"] {
  --bg-body:    #f8fafc;
  --bg-surface: #ffffff;
  --bg-card:    #ffffff;
  --bg-section: #f1f5f9;

  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-inverse:   #f0f4f8;

  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-brand:  rgba(49, 214, 171, 0.4);

  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06);
  --shadow-glow: 0 0 20px rgb(49 214 171 / 0.2);

  --shadow-1: 0 1px  2px  rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px  8px  rgba(0, 0, 0, 0.08);
  --shadow-3: 0 8px  24px rgba(0, 0, 0, 0.10);
  --shadow-4: 0 20px 48px rgba(0, 0, 0, 0.14);
}