/* ============================================================================
   1ClickBeauty — base
   Regras de tipografia e material seguindo a skill apple-design:
   · tracking especifico por tamanho (nunca um valor unico)
   · leading inversamente proporcional ao tamanho
   · fonte do sistema por padrao
   · espacamento em rem para respeitar o tamanho de texto do usuario
   ========================================================================= */

:root {
  /* — cor — */
  --bg:            #ffffff;
  --bg-sunken:     #f5f5f7;   /* cinza-neve da Apple, fundo do visor */
  --bg-elevated:   #fbfbfd;
  --material:      rgba(255, 255, 255, .72);
  --material-thin: rgba(255, 255, 255, .55);

  --label:    #1d1d1f;
  --label-2:  #6e6e73;
  --label-3:  #a1a1a6;

  --separator:      rgba(0, 0, 0, .08);
  --separator-firm: rgba(0, 0, 0, .14);
  --fill:           rgba(0, 0, 0, .045);
  --fill-strong:    rgba(0, 0, 0, .08);

  /* — a paleta da marca —
     Marrom e nude são as cores de 1ClickBeauty. Ficam no :root porque valem
     na plataforma inteira, não só na tela de entrar. */
  --brown-900: #2A1D17;   /* o marrom do fundo do login */
  --brown-800: #382720;
  --brown-700: #4A342B;   /* bordas sobre marrom */
  --brown-300: #B79E8E;   /* texto secundário sobre marrom */
  --field-dark:#1C120E;   /* campos: mais escuros que o fundo */
  --nude-100:  #F2E4D8;   /* a nossa cor clara */
  --nude-200:  #E7D3C2;
  --nude-400:  #CBAE97;

  /* O destaque da plataforma é a própria marca: marrom no que age, nude no
     que só sinaliza estado. Nada de azul de sistema. */
  --accent:       var(--brown-800);
  --accent-press: var(--brown-900);
  --accent-tint:  var(--nude-100);
  --danger:       #d7263d;

  /* — raio — */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;

  /* — sombra: superficies maiores leem mais espessas — */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05), 0 0 0 .5px rgba(0,0,0,.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 0 0 .5px rgba(0,0,0,.05);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.16), 0 0 0 .5px rgba(0,0,0,.06);

  /* — ritmo — */
  --gap-1: .25rem;
  --gap-2: .5rem;
  --gap-3: .75rem;
  --gap-4: 1rem;
  --gap-5: 1.5rem;
  --gap-6: 2rem;

  --toolbar-h: 52px;
  /* As duas colunas laterais do editor. O valor base NÃO é opcional: se
     --presets-w só existisse dentro de media queries, na faixa que nenhuma
     cobre a variável fica indefinida, `grid-template-columns` inteiro vira
     inválido e o layout desaba — sem erro, sem aviso. */
  --presets-w:   272px;
  --inspector-w: 356px;

  color-scheme: light;
  --font-sans: "Geist", "Geist Placeholder", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --w-regular: 400;
  --w-medium:  500;   /* o "bold" do app: Geist 500 ja segura hierarquia */

  font: var(--w-regular) 100%/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--label);
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  /* nada de atraso de 300ms no caminho da entrada */
  touch-action: manipulation;
}

/* — escala tipografica: tracking aperta conforme o tamanho cresce — */
.t-display { font-size: 1.75rem; line-height: 1.12; letter-spacing: -.021em; font-weight: var(--w-medium); }
.t-title   { font-size: 1.0625rem; line-height: 1.3;  letter-spacing: -.012em; font-weight: var(--w-medium); }
.t-body    { font-size: .8125rem;  line-height: 1.45; letter-spacing: -.004em; font-weight: var(--w-regular); }
.t-caption { font-size: .6875rem;  line-height: 1.35; letter-spacing:  .004em; font-weight: var(--w-medium); }

/* — numeros alinhados: valor de slider nao pode dancar enquanto arrasta — */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

button, input, output, select { font: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }

svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

::selection { background: var(--accent-tint); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

[hidden] { display: none !important; }

/* Enquanto o app não sabe quem está logado, nenhuma tela aparece.
   Sem isso, recarregar a página deslogado mostra a plataforma por uma fração
   de segundo antes do login entrar por cima — e dá a impressão de que dava
   pra usar sem conta. */
body.is-booting > .home,
body.is-booting > .picker,
body.is-booting > .editor,
body.is-booting > .auth,
body.is-booting > .profile { display: none !important; }

/* — acessibilidade: as tres preferencias independentes — */
@media (prefers-reduced-transparency: reduce) {
  :root { --material: #ffffff; --material-thin: #ffffff; }
  .toolbar, .inspector, .home__bar, .sheet { backdrop-filter: none !important; }
}
@media (prefers-contrast: more) {
  :root {
    --separator: rgba(0,0,0,.35);
    --separator-firm: rgba(0,0,0,.5);
    --label-2: #3a3a3c;
    --label-3: #6e6e73;
    --material: #ffffff;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* movimento vira fusao de opacidade, nunca deslocamento */
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
    scroll-behavior: auto !important;
  }
}