/* ============================================================
   tokens.css — Design "Estúdio": cores, tipografia, medidas
   Tudo que é decisão visual mora aqui; o resto só usa var(--...).
   ============================================================ */
:root {
  /* Tipografia */
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Grafite (topo, player, textos) */
  --ink:    #15171C;
  --ink-2:  #2A2E37;
  --ink-3:  #3A3E48;

  /* Papel (fundos) e linhas */
  --paper:       #F4F1EA;
  --card:        #FFFFFF;
  --line:        #E4E0D6;
  --line-strong: #CFCABD;
  --muted:       #5F636E;   /* texto de apoio (contraste AA sobre papel e branco) */
  --on-dark:     #B9BCC6;   /* texto de apoio sobre grafite */

  /* Destaque (coral). Três tons para três usos, todos com contraste adequado:
     --accent        bordas, barras, ícones (decorativo)
     --accent-strong fundo de botão com texto branco (4,6:1)
     --accent-text   texto pequeno em coral sobre branco/papel (5,9:1) */
  --accent:        #E4572E;
  --accent-strong: #D2441C;
  --accent-hover:  #B93A15;
  --accent-text:   #B83C14;
  --accent-soft:   #FDEEE8;
  --accent-ring:   rgba(228, 87, 46, .18);

  /* Estados */
  --ok:        #1B8A5A;
  --ok-soft:   #E6F5EE;
  --warn:      #A86A0A;
  --warn-soft: #FDF3DC;
  --danger:    #C62F27;
  --danger-soft: #FCE9E7;

  /* Forma */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Sombras (só em elementos flutuantes) */
  --shadow-card:  0 1px 2px rgba(21, 23, 28, .04), 0 8px 28px rgba(21, 23, 28, .06);
  --shadow-float: 0 18px 50px rgba(21, 23, 28, .22);

  /* Movimento */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: .16s var(--ease);
  --t-base: .26s var(--ease);

  /* Camadas */
  --z-bar: 90;
  --z-topbar: 100;
  --z-player: 200;
  --z-modal: 500;
  --z-success: 600;
  --z-loader: 1000;
}