/* =========================================================================
   BMR 3D — Design Tokens
   Fonte da verdade. Dark-first; [data-theme="light"] sobrescreve.
   Nada de cor crua em componente: sempre var(--…).
   ========================================================================= */

:root {
  color-scheme: dark;

  /* ---------------------------------------------------------------
     1. PALETA BRUTA (ramps) — não usar direto em componente.
        Usar os tokens semânticos da seção 2 em diante.
     --------------------------------------------------------------- */

  /* Roxo — cor da marca BMR 3D.
     #7c54cb vem do Brand Kit "BMR 3D" no Canva (arquivo do logotipo). */
  --violet-50:  #f3f0fb;
  --violet-100: #e7e1f6;
  --violet-200: #cfc5ee;
  --violet-300: #b3a3e2;
  --violet-400: #9a83d8;
  --violet-500: #8b6ad2;
  --violet-600: #7c54cb;  /* ★ primária — cor do logo */
  --violet-700: #6842ae;
  --violet-800: #55368c;
  --violet-900: #3e2867;
  --violet-950: #241740;

  /* Ciano — NÃO é cor de marca. Existe só como estado informativo,
     no mesmo nível de verde/âmbar/vermelho. */
  --cyan-300: #7ce0ff;
  --cyan-400: #39d0ff;
  --cyan-500: #12b8ee;
  --cyan-700: #0d7ea6;

  /* Neutros — cinza puro. --ink-800 é o #232323 do Brand Kit do Canva. */
  --ink-950: #0e0e0f;
  --ink-900: #161617;
  --ink-850: #1c1c1d;
  --ink-800: #232323;
  --ink-700: #2e2e2f;
  --ink-600: #414142;
  --ink-500: #5f5f61;
  --ink-400: #8a8a8d;
  --ink-300: #b0b0b3;
  --ink-200: #d2d2d5;
  --ink-100: #e9e9eb;
  --ink-050: #fafafb;

  /* Estados */
  --green-400: #34d399;
  --green-600: #0f9b6c;
  --amber-400: #fbbf24;
  --amber-600: #a16207;
  --rose-400:  #fb7185;
  --rose-600:  #c02a48;

  /* ---------------------------------------------------------------
     2. SUPERFÍCIES E TEXTO
     --------------------------------------------------------------- */
  --color-background:       var(--ink-950);
  --color-surface:          var(--ink-850);
  --color-surface-raised:   var(--ink-800);
  --color-surface-sunken:   var(--ink-900);
  --color-surface-glass:    rgba(28, 28, 29, 0.78);
  --color-surface-inverse:  var(--ink-050);

  --color-text:             var(--ink-050);
  --color-text-muted:       var(--ink-300);
  --color-text-soft:        var(--ink-400);
  --color-text-inverse:     var(--ink-950);
  --color-text-on-brand:    #ffffff;

  /* ---------------------------------------------------------------
     3. MARCA E ACENTOS
     --------------------------------------------------------------- */
  --color-brand:            var(--violet-600);
  --color-brand-hover:      var(--violet-500);
  --color-brand-active:     var(--violet-700);
  --color-brand-soft:       var(--violet-400);
  --color-brand-subtle:     rgba(124, 84, 203, 0.14);
  --color-brand-subtle-hi:  rgba(124, 84, 203, 0.24);

  --color-accent:           var(--cyan-400);
  --color-accent-subtle:    rgba(57, 208, 255, 0.14);

  --gradient-brand:  linear-gradient(135deg, #8b6ad2 0%, #7c54cb 48%, #55368c 100%);
  --gradient-tech:   linear-gradient(135deg, #b3a3e2 0%, #7c54cb 55%, #3e2867 100%);
  --gradient-halo:   radial-gradient(circle at 50% 0%, rgba(124, 84, 203, 0.28), transparent 70%);

  /* ---------------------------------------------------------------
     4. ESTADOS SEMÂNTICOS
     --------------------------------------------------------------- */
  --color-success:        var(--green-400);
  --color-success-subtle: rgba(52, 211, 153, 0.14);
  --color-warning:        var(--amber-400);
  --color-warning-subtle: rgba(251, 191, 36, 0.14);
  --color-danger:         var(--rose-400);
  --color-danger-subtle:  rgba(251, 113, 133, 0.14);
  --color-info:           var(--cyan-400);
  --color-info-subtle:    rgba(57, 208, 255, 0.14);

  /* ---------------------------------------------------------------
     5. BORDAS E FOCO
        Bordas de controle ≥ rgba(.36) para atender WCAG 1.4.11 (3:1).
     --------------------------------------------------------------- */
  --color-border:         rgba(176, 176, 179, 0.18);
  --color-border-strong:  rgba(233, 233, 235, 0.28);
  --color-border-control: rgba(210, 210, 213, 0.36);
  --color-border-brand:   rgba(124, 84, 203, 0.46);

  --color-focus:          var(--violet-400);
  --focus-ring:           0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus);

  /* ---------------------------------------------------------------
     6. TIPOGRAFIA
     --------------------------------------------------------------- */
  --font-display: Sora, ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-sans:    Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Escala 1.250 (major third), base 16px */
  --text-2xs:  0.6875rem;  /* 11 */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.375rem;   /* 22 */
  --text-2xl:  1.75rem;    /* 28 */
  --text-3xl:  2.25rem;    /* 36 */
  --text-4xl:  3rem;       /* 48 */
  --text-5xl:  3.75rem;    /* 60 */

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --leading-loose:  1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.08em;
  --tracking-caps:  0.14em;

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

  /* ---------------------------------------------------------------
     7. ESPAÇAMENTO — escala de 4px
     --------------------------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;  /*  4 */
  --space-2:  0.5rem;   /*  8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 6rem;     /* 96 */

  --space-page: clamp(1rem, 4vw, 4rem);
  --container-max: 76rem;

  /* ---------------------------------------------------------------
     8. RAIOS
     --------------------------------------------------------------- */
  --radius-xs:      0.25rem;
  --radius-sm:      0.5rem;
  --radius-md:      0.75rem;
  --radius-lg:      1rem;
  --radius-xl:      1.5rem;
  --radius-control: 999px;

  /* ---------------------------------------------------------------
     9. ELEVAÇÃO
     --------------------------------------------------------------- */
  --shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-sm:     0 4px 12px rgba(0, 0, 0, 0.28);
  --shadow-md:     0 12px 32px rgba(0, 0, 0, 0.32);
  --shadow-lg:     0 24px 64px rgba(0, 0, 0, 0.38);
  --shadow-card:   0 18px 54px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.035) inset;
  --shadow-brand:  0 22px 68px rgba(124, 84, 203, 0.22);
  --glow-brand:    0 0 0 1px rgba(124, 84, 203, 0.36), 0 0 28px rgba(124, 84, 203, 0.28);

  /* ---------------------------------------------------------------
     10. MOTION
     --------------------------------------------------------------- */
  --duration-instant: 80ms;
  --duration-fast:    140ms;
  --duration-base:    220ms;
  --duration-slow:    360ms;

  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ---------------------------------------------------------------
     11. LAYERING
     --------------------------------------------------------------- */
  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;
}

/* =========================================================================
   TEMA CLARO
   ========================================================================= */
[data-theme="light"] {
  color-scheme: light;

  --color-background:      #ffffff;
  --color-surface:         #f6f5f9;
  --color-surface-raised:  #ffffff;
  --color-surface-sunken:  #eceaf2;
  --color-surface-glass:   rgba(255, 255, 255, 0.82);
  --color-surface-inverse: var(--ink-950);

  --color-text:            #1a1a1b;
  --color-text-muted:      #4b4b4e;
  --color-text-soft:       #6c6c70;
  --color-text-inverse:    #ffffff;

  --color-brand:           var(--violet-700);
  --color-brand-hover:     var(--violet-600);
  --color-brand-active:    var(--violet-800);
  --color-brand-soft:      var(--violet-800);
  --color-brand-subtle:    rgba(104, 66, 174, 0.10);
  --color-brand-subtle-hi: rgba(104, 66, 174, 0.18);

  --color-accent:          var(--cyan-700);
  --color-accent-subtle:   rgba(13, 126, 166, 0.12);

  --color-success:         var(--green-600);
  --color-success-subtle:  rgba(15, 155, 108, 0.12);
  --color-warning:         var(--amber-600);
  --color-warning-subtle:  rgba(161, 98, 7, 0.12);
  --color-danger:          var(--rose-600);
  --color-danger-subtle:   rgba(192, 42, 72, 0.12);
  --color-info:            var(--cyan-700);
  --color-info-subtle:     rgba(13, 126, 166, 0.12);

  --color-border:          rgba(25, 25, 26, 0.12);
  --color-border-strong:   rgba(25, 25, 26, 0.22);
  --color-border-control:  rgba(25, 25, 26, 0.36);
  --color-border-brand:    rgba(104, 66, 174, 0.42);

  --color-focus:           var(--violet-700);

  --gradient-halo:  radial-gradient(circle at 50% 0%, rgba(124, 84, 203, 0.12), transparent 70%);

  --shadow-xs:    0 1px 2px rgba(36, 23, 64, 0.08);
  --shadow-sm:    0 4px 12px rgba(36, 23, 64, 0.08);
  --shadow-md:    0 12px 32px rgba(36, 23, 64, 0.10);
  --shadow-lg:    0 24px 64px rgba(36, 23, 64, 0.12);
  --shadow-card:  0 12px 36px rgba(36, 23, 64, 0.10), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  --shadow-brand: 0 18px 48px rgba(124, 84, 203, 0.18);
  --glow-brand:   0 0 0 1px rgba(104, 66, 174, 0.28), 0 0 24px rgba(124, 84, 203, 0.16);
}

/* =========================================================================
   ACESSIBILIDADE — respeitar redução de movimento
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast:    0ms;
    --duration-base:    0ms;
    --duration-slow:    0ms;
  }
}