/*
 * ============================================================
 *  ONFIDE DESIGN TOKENS — tokens.css
 *  Fonte: filadelfia.onfide.com.br / 00-tokens.css v1.0
 *  Extensão SpotOnFide: variáveis específicas da plataforma
 * ============================================================
 */

:root {

  /* ── Borgonha ── */
  --clr-borgonha-900:    #1a0209;
  --clr-borgonha-800:    #2a0110;
  --clr-borgonha-700:    #3e0316;
  --clr-borgonha-600:    #5c0522;
  --clr-borgonha-500:    #7a082f;
  --clr-borgonha-400:    #a30d42;
  --clr-borgonha-alpha15: rgba(62,3,22,.15);
  --clr-borgonha-alpha30: rgba(62,3,22,.30);
  --clr-borgonha-alpha60: rgba(62,3,22,.60);
  --clr-borgonha-alpha88: rgba(62,3,22,.88);

  /* ── Navy ── */
  --clr-navy-900:        #001232;
  --clr-navy-800:        #001a47;
  --clr-navy-700:        #00286c;
  --clr-navy-600:        #003a8c;
  --clr-navy-500:        #0052b0;
  --clr-navy-alpha15:    rgba(0,40,108,.15);
  --clr-navy-alpha30:    rgba(0,40,108,.30);

  /* ── Acento ── */
  --clr-acento-600:      #0062d6;
  --clr-acento-500:      #1e7cff;
  --clr-acento-400:      #4d96ff;
  --clr-acento-alpha12:  rgba(30,124,255,.12);
  --clr-acento-alpha25:  rgba(30,124,255,.25);

  /* ── Neutros ── */
  --clr-branco:          #ffffff;
  --clr-off-white:       #f5f3ef;
  --clr-creme:           #ede8e0;
  --clr-cinza-100:       #c8c2b8;
  --clr-cinza-300:       #9a9188;
  --clr-cinza-500:       #7a7268;
  --clr-cinza-700:       #3d3831;
  --clr-cinza-900:       #1e1b18;

  /* ── Semânticos ── */
  --clr-erro:            #df0000;
  --clr-alerta:          #d97706;
  --clr-sucesso:         #16a34a;

  /* ── Aliases ── */
  --color-bg-dark:              var(--clr-borgonha-900);
  --color-bg-surface:           var(--clr-borgonha-800);
  --color-bg-card-dark:         rgba(255,255,255,.04);
  --color-bg-light:             var(--clr-off-white);
  --color-bg-white:             var(--clr-branco);
  --color-text-on-dark:         var(--clr-branco);
  --color-text-on-dark-muted:   rgba(255,255,255,.65);
  --color-text-on-dark-subtle:  rgba(255,255,255,.40);
  --color-text-on-light:        var(--clr-cinza-700);
  --color-text-on-light-muted:  var(--clr-cinza-500);
  --color-brand-primary:        var(--clr-borgonha-700);
  --color-brand-secondary:      var(--clr-navy-700);
  --color-brand-accent:         var(--clr-acento-500);
  --color-border-dark:          rgba(255,255,255,.08);
  --color-border-medium:        rgba(255,255,255,.15);
  --color-border-light:         var(--clr-creme);
  --color-nav-bg-scroll:        rgba(26,2,9,.96);
  --color-nav-bg-hero:          transparent;

  /* ── Tipografia ── */
  --font-display:   'Roboto Slab', Georgia, 'Times New Roman', serif;
  --font-corpo:     'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-ui:        'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ── Escala tipográfica ── */
  --text-2xs:  .625rem;
  --text-xs:   .75rem;
  --text-sm:   .875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.25rem;
  --text-4xl:  clamp(2rem,4vw,3rem);
  --text-5xl:  clamp(2.75rem,5.5vw,4.25rem);
  --text-6xl:  clamp(3.5rem,7vw,5.5rem);

  /* ── Line-height / Letter-spacing ── */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;
  --leading-loose:   2;
  --tracking-tighter: -.03em;
  --tracking-tight:   -.015em;
  --tracking-normal:  0em;
  --tracking-wide:    .04em;
  --tracking-wider:   .08em;
  --tracking-caps:    .12em;

  /* ── Espaçamento ── */
  --space-1:  .25rem;
  --space-2:  .5rem;
  --space-3:  .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;
  --space-40: 10rem;
  --section-py:    clamp(4rem,8vw,7rem);
  --section-py-sm: clamp(2.5rem,5vw,4rem);
  --section-py-lg: clamp(5rem,10vw,9rem);

  /* ── Layout ── */
  --container-max:    1200px;
  --container-wide:   1400px;
  --container-narrow: 720px;
  --container-prose:  680px;
  --gutter:           clamp(1.25rem,5vw,2.5rem);
  --nav-height:        72px;
  --nav-height-mobile: 64px;

  /* ── Bordas e raios ── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;
  --border-thin:   1px solid var(--color-border-dark);
  --border-medium: 1px solid var(--color-border-medium);
  --border-light:  1px solid var(--color-border-light);

  /* ── Sombras ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,.12);
  --shadow-sm:  0 2px 8px rgba(0,0,0,.18),0 1px 3px rgba(0,0,0,.12);
  --shadow-md:  0 4px 16px rgba(0,0,0,.24),0 2px 6px rgba(0,0,0,.14);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.30),0 4px 12px rgba(0,0,0,.18);
  --shadow-xl:  0 16px 56px rgba(0,0,0,.38),0 8px 20px rgba(0,0,0,.22);
  --shadow-2xl: 0 24px 80px rgba(0,0,0,.45);
  --shadow-borgonha-sm: 0 4px 16px rgba(62,3,22,.35);
  --shadow-borgonha-md: 0 8px 32px rgba(62,3,22,.45);
  --shadow-borgonha-lg: 0 16px 56px rgba(62,3,22,.55);
  --shadow-acento-sm:   0 4px 16px rgba(30,124,255,.25);
  --shadow-acento-md:   0 8px 28px rgba(30,124,255,.35);

  /* ── Transições ── */
  --transition-fast:    150ms cubic-bezier(.4,0,.2,1);
  --transition-normal:  250ms cubic-bezier(.4,0,.2,1);
  --transition-slow:    400ms cubic-bezier(.4,0,.2,1);
  --transition-spring:  350ms cubic-bezier(.34,1.56,.64,1);
  --transition-elastic: 500ms cubic-bezier(.68,-.55,.265,1.55);

  /* ── Z-index ── */
  --z-below:    -1;
  --z-base:      1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-overlay:  500;
  --z-nav:      900;
  --z-modal:   1000;
  --z-toast:   1100;

  /* ── Gradientes ── */
  --gradient-hero: linear-gradient(
    160deg,
    var(--clr-borgonha-900) 0%,
    var(--clr-borgonha-800) 35%,
    var(--clr-borgonha-700) 65%,
    var(--clr-navy-900) 100%
  );
  --gradient-dark-overlay: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(26,2,9,.6) 60%,
    rgba(26,2,9,.95) 100%
  );
  --gradient-card-dark: linear-gradient(
    135deg,
    rgba(255,255,255,.05) 0%,
    rgba(255,255,255,.01) 100%
  );
  --gradient-section-divider: linear-gradient(
    to right,
    transparent,
    var(--clr-borgonha-700),
    transparent
  );
  --gradient-accent-glow: radial-gradient(
    ellipse at center,
    rgba(30,124,255,.15) 0%,
    transparent 70%
  );

  /* ==========================================================
     SPOTONFIRE — Extensões específicas da plataforma musical
     Preserva a identidade do logo (menorá dourada)
     mantendo o fundo borgonha do ecossistema ONFIDE
  ========================================================== */

  /* Ouro do logo SpotOnFide */
  --sof-gold:       #cb9225;
  --sof-gold-2:     #f09000;
  --sof-gold-3:     #f0b000;
  --sof-gold-dark:  #8a6010;
  --sof-gold-faint: rgba(203,146,37,.07);
  --sof-gold-glow:  rgba(203,146,37,.18);

  /* Dimensões do player */
  --sof-player-h:  82px;
  --sof-sidebar-w: 240px;

  /* Superfícies da plataforma (sobre o borgonha) */
  --sof-surface:    rgba(255,255,255,.03);
  --sof-surface-2:  rgba(255,255,255,.05);
  --sof-surface-3:  rgba(255,255,255,.08);

  /* Atalhos semânticos para o player */
  --sof-ink:    var(--clr-borgonha-900);
  --sof-ink-2:  var(--clr-borgonha-800);
  --sof-text:   var(--color-text-on-dark);
  --sof-text-2: var(--color-text-on-dark-muted);
  --sof-text-3: var(--color-text-on-dark-subtle);
  --sof-border: var(--color-border-dark);
  --sof-border-2: var(--color-border-medium);
}