/* Voa Entregador — Tokens de design, reset e layout geral
   Carregado da estrutura de componentes */

:root {
    /* Paleta */
    --bg: #F6F7F9;
    --surface: #FFFFFF;
    --surface-2: #FBFBFC;
    --ink-900: #0B1220;
    --ink-700: #2B3340;
    --ink-500: #5A6474;
    --ink-400: #8A94A6;
    --ink-300: #C3CAD6;
    --ink-200: #E6E9EF;
    --ink-100: #F0F2F6;

    --brand: #0B3B61;        /* azul profundo VOA */
    --brand-2: #1166B0;
    --brand-soft: #E7F0F8;

    /* Status — paleta oficial do projeto (icons.js original) */
    --open:    #4A7FD4; /* aberto    */
    --opening: #FFCA58; /* abrindo   */
    --closing: #7678EF; /* fechando  */
    --closed:  #E85D5D; /* fechado   */

    --open-soft:   rgba(74,127,212,0.14);
    --opening-soft:rgba(255,202,88,0.18);
    --closing-soft:rgba(118,120,239,0.14);
    --closed-soft: rgba(232,93,93,0.14);

    /* Mapa */
    --map-bg: #EEF1F5;
    --map-land: #F6F7F9;
    --map-water: #D8E3EC;
    --map-road: #FFFFFF;
    --map-road-stroke: #E4E8EE;

    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(11,18,32,0.06);
    --shadow-md: 0 6px 18px rgba(11,18,32,0.08);
    --shadow-lg: 0 18px 48px rgba(11,18,32,0.14);

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    --bottom-nav-h: 72px;
  }

  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0;
    height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    color: var(--ink-900);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior: none;
  }
  button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

  /* ---------- Layout geral ---------- */
  .frame {
    max-width: 1200px;
    margin: 0 auto;
    min-height: 100dvh;
    position: relative;
    background: var(--surface);
  }

  @media (min-width: 900px) {
    body { padding: 24px; background: #EAEDF2; }
    .frame {
      border-radius: 28px;
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      min-height: calc(100dvh - 48px);
    }
  }

  .app {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    height: 100dvh;
  }
  @media (min-width: 900px) {
    .app { height: calc(100dvh - 48px); }
  }