/* ============================================================================
   IGAMINGSUP — SUP Design System · Tokens
   ----------------------------------------------------------------------------
   Fonte da verdade de cor, tipografia, espaço, raio, sombra e movimento.
   Nenhum valor bruto deve aparecer fora deste arquivo.

   A paleta funcional é a declarada pela marca (#0B1026 / #2563FF / #8B2CFF).
   Cyan e magenta existem SOMENTE como extremos do gradiente de marca — os
   dois pontos do arco do logo que a paleta funcional não cobre. Nunca são
   cor de texto nem de superfície: em corpo de texto falham contraste, e em
   superfície competem com a primária.
   ========================================================================= */

:root {
  /* ─── Escala navy — a espinha dorsal ─────────────────────────────── */
  --navy-950: #060915;
  --navy-900: #0B1026;   /* Deep Navy oficial */
  --navy-850: #0E1430;
  --navy-800: #131A3D;
  --navy-750: #161D45;
  --navy-700: #1A2350;
  --navy-600: #242F66;
  --navy-500: #33407F;
  --navy-400: #4A5899;
  --navy-300: #6C79B3;
  --navy-200: #9AA4CC;
  --navy-100: #C6CDE5;
  --navy-50:  #E8ECF8;

  /* ─── Electric Blue — primária ───────────────────────────────────── */
  --blue-800: #062A99;
  --blue-700: #0B3ACC;
  --blue-600: #1650E6;
  --blue-500: #2563FF;
  --blue-400: #4A80FF;
  --blue-300: #7BA2FF;
  --blue-200: #ADC5FF;
  --blue-100: #D6E1FF;
  --blue-50:  #EEF3FF;

  /* ─── Violet — destaques ─────────────────────────────────────────── */
  --violet-800: #46098F;
  --violet-700: #5D0FBF;
  --violet-600: #741CE0;
  --violet-500: #8B2CFF;
  --violet-400: #A55CFF;
  --violet-300: #C08CFF;
  --violet-200: #DABDFF;
  --violet-100: #EDDEFF;
  --violet-50:  #F7F0FF;

  /* ─── Extremos exclusivos do gradiente de marca ──────────────────── */
  --cyan-600:    #0089C7;
  --cyan-500:    #00A8F0;
  --cyan-400:    #38BDFF;
  --cyan-300:    #7AD3FF;
  --magenta-600: #A014C9;
  --magenta-500: #C020F0;
  --magenta-400: #D558FF;

  /* ─── Semânticas ─────────────────────────────────────────────────── */
  --green-600: #0A8F63;
  --green-500: #10B981;
  --green-400: #34D399;
  --green-100: #D1FAE5;
  --amber-600: #C77B06;
  --amber-500: #F5A524;
  --amber-400: #FBBF44;
  --amber-100: #FEF3C7;
  --red-600:   #D42449;
  --red-500:   #FF4D6A;
  --red-400:   #FF7A90;
  --red-100:   #FFE0E5;

  /* Ouro de rating. Deliberadamente fora da paleta de marca: estrela é
     affordance universal e o usuário a reconhece antes de ler. Estrela azul
     seria bonita e ilegível como sinal. */
  --gold-500: #FFB020;
  --gold-400: #FFC44D;

  /* ─── Gradiente de marca — extraído do símbolo ───────────────────── */
  --brand-gradient: linear-gradient(
    100deg,
    var(--cyan-500) 0%,
    var(--blue-500) 34%,
    var(--violet-500) 68%,
    var(--magenta-500) 100%
  );
  --brand-gradient-soft: linear-gradient(
    100deg,
    var(--blue-500) 0%,
    var(--violet-500) 100%
  );
  --brand-gradient-vertical: linear-gradient(
    170deg,
    var(--cyan-500) 0%,
    var(--blue-500) 40%,
    var(--violet-500) 100%
  );

  /* ─── Tipografia ─────────────────────────────────────────────────── */
  --font-display: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Escala modular ~1.2 ancorada em 16px, com clamp nos tamanhos de display
     para que o mesmo token sirva mobile e desktop sem media query. */
  --text-2xs: 0.6875rem;  /* 11px — micro-rótulo, contador */
  --text-xs:  0.75rem;    /* 12px — meta, chip */
  --text-sm:  0.8125rem;  /* 13px — UI densa, tabela */
  --text-base:0.9375rem;  /* 15px — corpo de interface */
  --text-md:  1rem;       /* 16px — corpo de leitura */
  --text-lg:  1.125rem;   /* 18px — lead */
  --text-xl:  1.375rem;   /* 22px */
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.75rem);
  --text-3xl: clamp(1.75rem, 1.45rem + 1.5vw, 2.25rem);
  --text-4xl: clamp(1.875rem, 1.5rem + 1.9vw, 2.625rem);
  --text-5xl: clamp(2.25rem, 1.7rem + 2.8vw, 3.25rem);
  --text-6xl: clamp(2.25rem, 1.55rem + 3.6vw, 4rem);

  --leading-none:  1;
  --leading-tight: 1.15;
  --leading-snug:  1.32;
  --leading-normal:1.55;
  --leading-relaxed:1.72;

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

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

  /* ─── Espaço — base 4px ──────────────────────────────────────────── */
  --space-0:  0;
  --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;

  /* Ritmo vertical de seção — escala com a viewport para não empilhar
     seções coladas no mobile nem espaçadas demais no desktop. */
  --section-y: clamp(3rem, 1.8rem + 4vw, 5.5rem);

  /* ─── Raio ───────────────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 999px;

  /* ─── Layout ─────────────────────────────────────────────────────── */
  --container:      1200px;
  --container-wide: 1360px;
  --container-prose: 700px;
  --container-hero:  920px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --header-h: 68px;

  /* ─── Movimento ──────────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   380ms;
  --dur-slower: 620ms;

  /* ─── Camadas ────────────────────────────────────────────────────── */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-drawer: 400;
  --z-modal: 500;
  --z-toast: 600;
}

/* ==========================================================================
   TEMA ESCURO — o padrão. A marca nasceu sobre Deep Navy.
   ========================================================================== */
:root,
[data-theme='dark'] {
  color-scheme: dark;

  --bg:            var(--navy-900);
  --bg-deep:       var(--navy-950);
  --surface:       var(--navy-850);
  --surface-2:     var(--navy-800);
  --surface-3:     var(--navy-700);
  --surface-hover: var(--navy-750);
  --surface-inset: #080C1D;

  --border:        rgba(154, 164, 204, 0.14);
  --border-strong: rgba(154, 164, 204, 0.26);
  --border-subtle: rgba(154, 164, 204, 0.08);

  --text:          #F0F3FC;
  --text-strong:   #FFFFFF;
  --text-muted:    #A8B2D1;
  --text-subtle:   #6F7CA3;
  --text-inverse:  var(--navy-900);

  --primary:          var(--blue-500);
  --primary-hover:    var(--blue-400);
  --primary-active:   var(--blue-600);
  --primary-contrast: #FFFFFF;
  --primary-soft:     rgba(37, 99, 255, 0.14);
  --primary-soft-hover: rgba(37, 99, 255, 0.22);

  --accent:        var(--violet-500);
  --accent-soft:   rgba(139, 44, 255, 0.15);

  --success:       var(--green-400);
  --success-soft:  rgba(16, 185, 129, 0.15);
  --warning:       var(--amber-400);
  --warning-soft:  rgba(245, 165, 36, 0.15);
  --danger:        var(--red-400);
  --danger-soft:   rgba(255, 77, 106, 0.15);
  --info:          var(--cyan-400);
  --info-soft:     rgba(0, 168, 240, 0.15);

  --ring: rgba(74, 128, 255, 0.55);

  /* No escuro, sombra quase não lê. A profundidade vem da borda superior
     iluminada somada a uma sombra ampla e muito escura. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --shadow-2: 0 4px 16px -4px rgba(0, 0, 0, 0.5),
              0 1px 3px rgba(0, 0, 0, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-3: 0 18px 44px -12px rgba(0, 0, 0, 0.65),
              0 6px 14px -6px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-glow: 0 0 0 1px rgba(37, 99, 255, 0.35),
                 0 12px 36px -10px rgba(37, 99, 255, 0.45);

  --scrim: rgba(6, 9, 21, 0.72);
  --glass: rgba(19, 26, 61, 0.62);

  --logo-filter: none;
}

/* ==========================================================================
   TEMA CLARO — projetado, não invertido. Fundo levemente frio para o azul
   não vibrar contra branco puro; texto em navy, nunca cinza neutro.
   ========================================================================== */
[data-theme='light'] {
  color-scheme: light;

  --bg:            #FFFFFF;
  --bg-deep:       #F4F6FC;
  --surface:       #FFFFFF;
  --surface-2:     #F7F9FD;
  --surface-3:     #EFF2FA;
  --surface-hover: #F4F7FE;
  --surface-inset: #F0F3FA;

  --border:        rgba(11, 16, 38, 0.10);
  --border-strong: rgba(11, 16, 38, 0.20);
  --border-subtle: rgba(11, 16, 38, 0.055);

  --text:          #131A3D;
  --text-strong:   var(--navy-900);
  --text-muted:    #55608A;
  --text-subtle:   #7C86A8;
  --text-inverse:  #FFFFFF;

  --primary:          var(--blue-600);
  --primary-hover:    var(--blue-500);
  --primary-active:   var(--blue-700);
  --primary-contrast: #FFFFFF;
  --primary-soft:     rgba(37, 99, 255, 0.09);
  --primary-soft-hover: rgba(37, 99, 255, 0.15);

  --accent:        var(--violet-600);
  --accent-soft:   rgba(139, 44, 255, 0.10);

  --success:       var(--green-600);
  --success-soft:  rgba(16, 185, 129, 0.12);
  --warning:       var(--amber-600);
  --warning-soft:  rgba(245, 165, 36, 0.16);
  --danger:        #D42449;
  --danger-soft:   rgba(255, 77, 106, 0.12);
  --info:          var(--cyan-600);
  --info-soft:     rgba(0, 168, 240, 0.12);

  --ring: rgba(37, 99, 255, 0.45);

  --shadow-1: 0 1px 2px rgba(11, 16, 38, 0.06);
  --shadow-2: 0 4px 14px -3px rgba(11, 16, 38, 0.10),
              0 1px 3px rgba(11, 16, 38, 0.05);
  --shadow-3: 0 20px 44px -14px rgba(11, 16, 38, 0.18),
              0 6px 14px -6px rgba(11, 16, 38, 0.09);
  --shadow-glow: 0 0 0 1px rgba(37, 99, 255, 0.22),
                 0 14px 34px -12px rgba(37, 99, 255, 0.30);

  --scrim: rgba(11, 16, 38, 0.42);
  --glass: rgba(255, 255, 255, 0.78);

  --logo-filter: none;
}

/* Sem escolha explícita, o sistema decide. Guardado por :not([data-theme])
   para que o toggle vença nos dois sentidos. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']):not([data-theme='light']) {
    color-scheme: light;

    --bg: #FFFFFF;
    --bg-deep: #F4F6FC;
    --surface: #FFFFFF;
    --surface-2: #F7F9FD;
    --surface-3: #EFF2FA;
    --surface-hover: #F4F7FE;
    --surface-inset: #F0F3FA;

    --border: rgba(11, 16, 38, 0.10);
    --border-strong: rgba(11, 16, 38, 0.20);
    --border-subtle: rgba(11, 16, 38, 0.055);

    --text: #131A3D;
    --text-strong: #0B1026;
    --text-muted: #55608A;
    --text-subtle: #7C86A8;
    --text-inverse: #FFFFFF;

    --primary: #1650E6;
    --primary-hover: #2563FF;
    --primary-active: #0B3ACC;
    --primary-soft: rgba(37, 99, 255, 0.09);
    --primary-soft-hover: rgba(37, 99, 255, 0.15);

    --accent: #741CE0;
    --accent-soft: rgba(139, 44, 255, 0.10);

    --success: #0A8F63;
    --success-soft: rgba(16, 185, 129, 0.12);
    --warning: #C77B06;
    --warning-soft: rgba(245, 165, 36, 0.16);
    --danger: #D42449;
    --danger-soft: rgba(255, 77, 106, 0.12);
    --info: #0089C7;
    --info-soft: rgba(0, 168, 240, 0.12);

    --ring: rgba(37, 99, 255, 0.45);

    --shadow-1: 0 1px 2px rgba(11, 16, 38, 0.06);
    --shadow-2: 0 4px 14px -3px rgba(11, 16, 38, 0.10), 0 1px 3px rgba(11, 16, 38, 0.05);
    --shadow-3: 0 20px 44px -14px rgba(11, 16, 38, 0.18), 0 6px 14px -6px rgba(11, 16, 38, 0.09);
    --shadow-glow: 0 0 0 1px rgba(37, 99, 255, 0.22), 0 14px 34px -12px rgba(37, 99, 255, 0.30);

    --scrim: rgba(11, 16, 38, 0.42);
    --glass: rgba(255, 255, 255, 0.78);
  }
}