/* ==========================================================================
   Ewitec Design System — Tokens
   Base da marca: teal profundo (#095251) + dourado (#E2C045) do logotipo.
   ========================================================================== */

:root {
  /* ---- Brand palette ---------------------------------------------------- */
  --teal-50:  #E8F5F3;
  --teal-100: #C6E8E3;
  --teal-200: #8FD3C9;
  --teal-300: #4FBDAE;
  --teal-400: #1FA392;
  --teal-500: #0E8576;
  --teal-600: #0A6B62;
  --teal-700: #095251; /* cor primária da marca */
  --teal-800: #073B3A;
  --teal-900: #042726;
  --teal-950: #021615;

  --gold-100: #FBF3D6;
  --gold-200: #F5E3A1;
  --gold-300: #EDD173;
  --gold-400: #E2C045; /* dourado da marca */
  --gold-500: #C9A42A;
  --gold-600: #A0811D;

  --ink-0:   #FFFFFF;
  --ink-50:  #F0F7F6;
  --ink-100: #D7E4E2;
  --ink-200: #A9BDBA;
  --ink-300: #7F9894;
  --ink-400: #5A7470;
  --ink-500: #3C5552;
  --ink-600: #243B39;
  --ink-700: #152927;
  --ink-800: #0B1C1B;
  --ink-900: #061211;
  --ink-950: #030B0A;

  --success: #34D399;
  --warning: #FBBF24;
  --danger:  #F87171;

  /* ---- Semantic: tema CLARO (padrão) -------------------------------- */
  --fg-rgb:    11, 28, 27;     /* cor base de texto/overlays em RGB */
  --bg-rgb:    246, 249, 248;  /* fundo da página em RGB (menus translúcidos) */
  --panel-rgb: 255, 255, 255;  /* painéis flutuantes em RGB */

  --bg:            #F6F9F8;
  --bg-elevated:   #FFFFFF;
  --surface:       rgba(var(--fg-rgb), 0.025);
  --surface-hover: rgba(var(--fg-rgb), 0.05);
  --surface-solid: #FFFFFF;
  --border:        rgba(var(--fg-rgb), 0.09);
  --border-strong: rgba(var(--fg-rgb), 0.16);

  --text:          var(--ink-800);
  --text-muted:    var(--ink-500);
  --text-subtle:   var(--ink-400);

  --primary:       var(--teal-600);
  --primary-strong:var(--teal-700);
  --teal-text:     var(--teal-600);
  --gold-text:     #8A6C10;
  --accent:        var(--gold-400);
  --accent-strong: var(--gold-300);
  --on-accent:     var(--teal-950);

  --orb-opacity:   0.22;
  --logo-filter:   grayscale(1) contrast(1.1);
  --switch-off:    var(--ink-100);

  /* ---- Gradients ------------------------------------------------------ */
  --grad-brand: linear-gradient(135deg, var(--teal-400) 0%, var(--gold-400) 100%);
  --grad-text:  linear-gradient(100deg, var(--teal-800) 5%, var(--teal-600) 45%, var(--gold-600) 95%);
  --grad-surface: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0.75) 100%);
  --glow-teal:  0 0 0 1px rgba(14,133,118,.2), 0 14px 40px -18px rgba(14,133,118,.5);
  --glow-gold:  0 10px 30px -12px rgba(201,164,42,.6);

  --shadow-sm: 0 1px 2px rgba(11,28,27,.06);
  --shadow-md: 0 10px 30px -12px rgba(11,28,27,.18);
  --shadow-lg: 0 30px 70px -24px rgba(11,28,27,.22);

  /* ---- Typography ----------------------------------------------------- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-4xl:  clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
  --fs-5xl:  clamp(2.75rem, 1.8rem + 4.6vw, 5.25rem);

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.65;

  /* ---- Spacing (escala de 4px) --------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Radius / shadow / motion -------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-full: 999px;


  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 700ms;

  --container: 1200px;
  --gutter: clamp(1rem, 4vw, 2rem);
}

/* ---- Tema ESCURO --------------------------------------------------------- */
[data-theme="dark"] {
  --fg-rgb:    240, 247, 246;
  --bg-rgb:    3, 11, 10;
  --panel-rgb: 10, 23, 22;

  --bg:            var(--ink-950);
  --bg-elevated:   var(--ink-900);
  --surface:       rgba(var(--fg-rgb), 0.035);
  --surface-hover: rgba(var(--fg-rgb), 0.06);
  --surface-solid: #0A1716;
  --border:        rgba(var(--fg-rgb), 0.08);
  --border-strong: rgba(var(--fg-rgb), 0.16);

  --text:          var(--ink-50);
  --text-muted:    var(--ink-200);
  --text-subtle:   var(--ink-300);

  --primary:       var(--teal-300);
  --primary-strong:var(--teal-400);
  --teal-text:     var(--teal-200);
  --gold-text:     var(--gold-300);

  --orb-opacity:   0.55;
  --logo-filter:   grayscale(1) invert(1) brightness(1.15);
  --switch-off:    var(--ink-600);

  --grad-brand: linear-gradient(135deg, var(--teal-300) 0%, var(--gold-400) 100%);
  --grad-text:  linear-gradient(100deg, #F0F7F6 10%, var(--teal-200) 45%, var(--gold-300) 90%);
  --grad-surface: linear-gradient(180deg, rgba(240,247,246,0.06) 0%, rgba(240,247,246,0.015) 100%);
  --glow-teal:  0 0 0 1px rgba(79,189,174,.25), 0 20px 60px -20px rgba(31,163,146,.55);
  --glow-gold:  0 10px 40px -10px rgba(226,192,69,.55);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg: 0 30px 80px -20px rgba(0,0,0,.7);
  color-scheme: dark;
}
:root { color-scheme: light; }