/* Tokens do docs/DESIGN.md (v1.1). O CSS só implementa o que o DESIGN declara. */

:root {
  color-scheme: light dark;

  /* ---- Tema: valores claros como base (navegadores sem light-dark() ficam no claro) ---- */
  --bg: #FFFFFF;
  --bg-secondary: #F2F2F7;
  --bg-elevated: #FFFFFF;
  --bg-elevated-2: #FFFFFF;
  --label: #000000;
  --label-secondary: #4B4B51;
  --label-tertiary: #6C6C70;
  --label-quaternary: #8E8E93;
  --separator: #D1D1D6;
  --separator-strong: #6C6C70;
  --fill-1: #E4E4E6;
  --fill-3: #EFEFF0;
  --accent: #0056B3;
  --accent-weak: #007AFF;
  --danger: #B3261E;
  --warning-text: #8A4B00;
  --switch-on: #146C43;

  /* ---- Camada de câmera: fixa, sempre escura ---- */
  --cam-bg: #000000;
  --cam-glass-color: rgb(0 0 0 / .55);
  --cam-glass-filter: blur(20px) saturate(180%);
  --cam-label: #FFFFFF;
  --cam-active: #FFD60A;
  --cam-focus-halo: #000000;
  --rec: #FF3B30;
  --rec-strong: #D70015;
  --cam-ring: #FFFFFF;
  --cam-button: rgb(255 255 255 / .16);

  /* ---- Tipografia ---- */
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-read: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-title-2: 1.375rem;
  --text-title-3: 1.25rem;
  --text-headline: 1.0625rem;
  --text-body: 1.0625rem;
  --text-callout: 1rem;
  --text-subheadline: 0.9375rem;
  --text-footnote: 0.8125rem;
  --text-caption-1: 0.75rem;
  --lh-title-2: 1.273;
  --lh-title-3: 1.25;
  --lh-headline: 1.294;
  --lh-callout: 1.313;
  --lh-subheadline: 1.333;
  --lh-footnote: 1.385;
  --lh-caption-1: 1.333;
  --lh-prose: 1.5;
  --lh-read: 1.35;

  /* ---- Espaçamento ---- */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-10: 48px;
  --gutter: var(--space-5);

  /* ---- Cantos ---- */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* ---- Sombras (claro) ---- */
  --shadow-1: 0 1px 2px rgb(0 0 0 / .06), 0 1px 1px rgb(0 0 0 / .04);
  --shadow-3: 0 8px 20px rgb(0 0 0 / .10), 0 2px 6px rgb(0 0 0 / .06);
  --shadow-4: 0 16px 40px rgb(0 0 0 / .14), 0 4px 12px rgb(0 0 0 / .08);
  --shadow-5: 0 28px 72px rgb(0 0 0 / .22), 0 8px 24px rgb(0 0 0 / .12);

  /* ---- Camadas ---- */
  --z-base: 0;
  --z-raised: 10;
  --z-overlay-notes: 20;
  --z-float: 50;
  --z-controls: 200;
  --z-drop: 400;
  --hairline: 1px solid transparent;

  /* ---- Movimento ---- */
  --dur-micro: 120ms;
  --dur-state: 200ms;
  --dur-enter: 280ms;
  --dur-exit: 200ms;
  --dur-page: 320ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);

  /* ---- Medidas de componentes ---- */
  --target: 44px;
  --shutter: 76px;
  --round-btn: 48px;
  --strip-pad: var(--space-4);
  --text-column: 40rem; /* largura máxima da coluna do editor (~68 caracteres) */

  /* ---- Foco (duas cores) ---- */
  --focus: var(--accent);
  --focus-halo: var(--bg);
}

@supports (color: light-dark(#000, #fff)) {
  :root {
    --bg: light-dark(#FFFFFF, #000000);
    --bg-secondary: light-dark(#F2F2F7, #1C1C1E);
    --bg-elevated: light-dark(#FFFFFF, #1C1C1E);
    --bg-elevated-2: light-dark(#FFFFFF, #2C2C2E);
    --label: light-dark(#000000, #FFFFFF);
    --label-secondary: light-dark(#4B4B51, #C7C7CC);
    --label-tertiary: light-dark(#6C6C70, #AEAEB2);
    --label-quaternary: light-dark(#8E8E93, #8E8E93);
    --separator: light-dark(#D1D1D6, #38383A);
    --separator-strong: light-dark(#6C6C70, #8E8E93);
    --fill-1: light-dark(#E4E4E6, #2B2B2E);
    --fill-3: light-dark(#EFEFF0, #1D1D1F);
    --accent: light-dark(#0056B3, #409CFF);
    --accent-weak: light-dark(#007AFF, #0A84FF);
    --danger: light-dark(#B3261E, #FF6961);
    --warning-text: light-dark(#8A4B00, #FFB340);
    --switch-on: light-dark(#146C43, #248A3D);
  }
}

/* Escolha manual do tema: o light-dark() segue o color-scheme do elemento. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Sombras no escuro: a elevação vem da superfície; a sombra só sela a borda. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow-1: 0 1px 2px rgb(0 0 0 / .50);
    --shadow-3: 0 8px 24px rgb(0 0 0 / .60);
    --shadow-4: 0 16px 40px rgb(0 0 0 / .70);
    --shadow-5: 0 28px 72px rgb(0 0 0 / .72);
  }
}
:root[data-theme="dark"] {
  --shadow-1: 0 1px 2px rgb(0 0 0 / .50);
  --shadow-3: 0 8px 24px rgb(0 0 0 / .60);
  --shadow-4: 0 16px 40px rgb(0 0 0 / .70);
  --shadow-5: 0 28px 72px rgb(0 0 0 / .72);
}

@media (min-width: 40rem) { :root { --gutter: var(--space-7); } }
@media (min-width: 64rem) { :root { --gutter: var(--space-8); } }

/* Contraste aumentado */
@media (prefers-contrast: more) {
  :root {
    --label-secondary: var(--label);
    --separator: var(--separator-strong);
  }
  @supports (color: light-dark(#000, #fff)) {
    :root {
      --label-tertiary: light-dark(#3C3C43, #EBEBF5);
      --accent: light-dark(#003E82, #64D2FF);
    }
  }
}

/* Cores forçadas: o navegador assume a paleta. */
@media (forced-colors: active) {
  :root {
    --bg: Canvas;
    --bg-secondary: Canvas;
    --bg-elevated: Canvas;
    --bg-elevated-2: Canvas;
    --label: CanvasText;
    --label-secondary: CanvasText;
    --label-tertiary: CanvasText;
    --separator: CanvasText;
    --separator-strong: CanvasText;
    --accent: LinkText;
    --focus: Highlight;
    --hairline: 1px solid CanvasText;
  }
}