/* VAULT Studio · tokens de design no padrão Apple (HIG jun/2025, via skill design-apple cap. 9)
   Cores semânticas e de sistema, claro/escuro, contraste aumentado, transparência e movimento reduzidos.
   Um único accent de produto: indigo (texto branco passa 4.5:1 nos dois modos). Laranja fica para as peças do VAULT. */

:root {
  color-scheme: light dark;

  /* Fonte do sistema (nunca embutir SF Pro) */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Escala tipográfica (densidade macOS; iOS "Large" em telas compactas via media query) */
  --text-large-title: 400 26px/32px var(--font-sans);
  --text-title-1: 400 22px/26px var(--font-sans);
  --text-title-2: 400 17px/22px var(--font-sans);
  --text-title-3: 400 15px/20px var(--font-sans);
  --text-headline: 700 13px/16px var(--font-sans);
  --text-body: 400 13px/16px var(--font-sans);
  --text-callout: 400 12px/15px var(--font-sans);
  --text-subhead: 400 11px/14px var(--font-sans);
  --text-footnote: 400 10px/13px var(--font-sans);
  --text-caption: 400 10px/13px var(--font-sans);

  /* Cores de sistema (light) */
  --sys-red: #FF383C; --sys-orange: #FF8D28; --sys-yellow: #FFCC00; --sys-green: #34C759;
  --sys-mint: #00C8B3; --sys-teal: #00C3D0; --sys-cyan: #00C0E8; --sys-blue: #0088FF;
  --sys-indigo: #6155F5; --sys-purple: #CB30E0; --sys-pink: #FF2D55; --sys-brown: #AC7F5E;
  --sys-gray: #8E8E93; --sys-gray2: #AEAEB2; --sys-gray3: #C7C7CC;
  --sys-gray4: #D1D1D6; --sys-gray5: #E5E5EA; --sys-gray6: #F2F2F7;

  /* Cores semânticas de interface (valores UIKit) */
  --label: #000000;
  --label-2: rgba(60, 60, 67, .60);
  --label-3: rgba(60, 60, 67, .30);
  --label-4: rgba(60, 60, 67, .18);
  --placeholder: rgba(60, 60, 67, .30);
  --separator: rgba(60, 60, 67, .29);
  --separator-opaque: #C6C6C8;
  --bg: #FFFFFF;
  --bg-2: #F2F2F7;
  --bg-3: #FFFFFF;
  --bg-grouped: #F2F2F7;
  --bg-grouped-2: #FFFFFF;
  --bg-grouped-3: #F2F2F7;
  --fill: rgba(120, 120, 128, .20);
  --fill-2: rgba(120, 120, 128, .16);
  --fill-3: rgba(118, 118, 128, .12);
  --fill-4: rgba(116, 116, 128, .08);
  --accent: var(--sys-indigo);
  --on-accent: #FFFFFF;
  --link: var(--sys-blue);
  --scene-bg: #ECECF1;         /* fundo do viewport 3D (camada de conteúdo) */
  --scene-grid: #D6D6DC;

  /* Espaço, raio, alvo */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --gutter: 32px;
  --radius-s: 8px; --radius-m: 12px; --radius-l: 16px; --radius-xl: 26px; --radius-pill: 9999px;
  --tap: 44px; --tap-secondary: 28px;
  --hairline: 0.5px;

  /* Movimento */
  --ease-standard: cubic-bezier(.25, .1, .25, 1);
  --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms;

  /* Vidro (só camada de controles/navegação) */
  --glass-bg: color-mix(in srgb, var(--bg) 72%, transparent);
  --glass-blur: blur(20px) saturate(180%);
}

/* Controles nativos (checkbox, select, barra de rolagem) seguem a escolha manual de tema */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Escala iOS em telas compactas (toque) */
@media (max-width: 767px) {
  :root {
    --text-large-title: 400 34px/41px var(--font-sans);
    --text-title-1: 400 28px/34px var(--font-sans);
    --text-title-2: 400 22px/28px var(--font-sans);
    --text-title-3: 400 20px/25px var(--font-sans);
    --text-headline: 600 17px/22px var(--font-sans);
    --text-body: 400 17px/22px var(--font-sans);
    --text-callout: 400 16px/21px var(--font-sans);
    --text-subhead: 400 15px/20px var(--font-sans);
    --text-footnote: 400 13px/18px var(--font-sans);
    --text-caption: 400 12px/16px var(--font-sans);
    --gutter: 16px;
  }
}

/* Dark Mode: automático pelo sistema (salvo escolha manual "claro") ou forçado pelo toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sys-red: #FF4245; --sys-orange: #FF9230; --sys-yellow: #FFD600; --sys-green: #30D158;
    --sys-mint: #00DAC3; --sys-teal: #00D2E0; --sys-cyan: #3CD3FE; --sys-blue: #0091FF;
    --sys-indigo: #6D7CFF; --sys-purple: #DB34F2; --sys-pink: #FF375F; --sys-brown: #B78A66;
    --sys-gray: #8E8E93; --sys-gray2: #636366; --sys-gray3: #48484A;
    --sys-gray4: #3A3A3C; --sys-gray5: #2C2C2E; --sys-gray6: #1C1C1E;
    --label: #FFFFFF; --label-2: rgba(235, 235, 245, .60); --label-3: rgba(235, 235, 245, .30); --label-4: rgba(235, 235, 245, .16);
    --placeholder: rgba(235, 235, 245, .30); --separator: rgba(84, 84, 88, .60); --separator-opaque: #38383A;
    --bg: #000000; --bg-2: #1C1C1E; --bg-3: #2C2C2E;
    --bg-grouped: #000000; --bg-grouped-2: #1C1C1E; --bg-grouped-3: #2C2C2E;
    --fill: rgba(120, 120, 128, .36); --fill-2: rgba(120, 120, 128, .32); --fill-3: rgba(118, 118, 128, .24); --fill-4: rgba(116, 116, 128, .18);
    --scene-bg: #121214; --scene-grid: #2A2A2E;
    --glass-bg: color-mix(in srgb, var(--bg-2) 72%, transparent);
  }
}
:root[data-theme="dark"] {
  --sys-red: #FF4245; --sys-orange: #FF9230; --sys-yellow: #FFD600; --sys-green: #30D158;
  --sys-mint: #00DAC3; --sys-teal: #00D2E0; --sys-cyan: #3CD3FE; --sys-blue: #0091FF;
  --sys-indigo: #6D7CFF; --sys-purple: #DB34F2; --sys-pink: #FF375F; --sys-brown: #B78A66;
  --sys-gray: #8E8E93; --sys-gray2: #636366; --sys-gray3: #48484A;
  --sys-gray4: #3A3A3C; --sys-gray5: #2C2C2E; --sys-gray6: #1C1C1E;
  --label: #FFFFFF; --label-2: rgba(235, 235, 245, .60); --label-3: rgba(235, 235, 245, .30); --label-4: rgba(235, 235, 245, .16);
  --placeholder: rgba(235, 235, 245, .30); --separator: rgba(84, 84, 88, .60); --separator-opaque: #38383A;
  --bg: #000000; --bg-2: #1C1C1E; --bg-3: #2C2C2E;
  --bg-grouped: #000000; --bg-grouped-2: #1C1C1E; --bg-grouped-3: #2C2C2E;
  --fill: rgba(120, 120, 128, .36); --fill-2: rgba(120, 120, 128, .32); --fill-3: rgba(118, 118, 128, .24); --fill-4: rgba(116, 116, 128, .18);
  --scene-bg: #121214; --scene-grid: #2A2A2E;
  --glass-bg: color-mix(in srgb, var(--bg-2) 72%, transparent);
}

/* Contraste aumentado */
@media (prefers-contrast: more) {
  :root {
    --sys-red: #E9152D; --sys-orange: #C55300; --sys-yellow: #A16A00; --sys-green: #008932;
    --sys-mint: #008575; --sys-teal: #008198; --sys-cyan: #007EAE; --sys-blue: #1E6EF4;
    --sys-indigo: #564ADE; --sys-purple: #B02FC2; --sys-pink: #E7124D; --sys-brown: #956D51;
    --sys-gray: #6C6C70; --sys-gray2: #8E8E93; --sys-gray3: #AEAEB2; --sys-gray4: #BCBCC0; --sys-gray5: #D8D8DC; --sys-gray6: #EBEBF0;
    --label-2: rgba(60, 60, 67, .78); --separator: rgba(60, 60, 67, .5);
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sys-red: #FF6165; --sys-orange: #FFA056; --sys-yellow: #FEDF43; --sys-green: #4AD968;
    --sys-mint: #54DFCB; --sys-teal: #3BDDEC; --sys-cyan: #6DD9FF; --sys-blue: #5CB8FF;
    --sys-indigo: #A7AAFF; --sys-purple: #EA8DFF; --sys-pink: #FF8AC4; --sys-brown: #DBA679;
    --sys-gray: #AEAEB2; --sys-gray2: #7C7C80; --sys-gray3: #545456; --sys-gray4: #444446; --sys-gray5: #363638; --sys-gray6: #242426;
    --label-2: rgba(235, 235, 245, .8); --separator: rgba(84, 84, 88, .9);
    --on-accent: #000000;
  }
}
@media (prefers-contrast: more) {
  :root[data-theme="dark"] {
    --sys-indigo: #A7AAFF; --sys-blue: #5CB8FF; --sys-orange: #FFA056; --sys-green: #4AD968; --sys-red: #FF6165;
    --label-2: rgba(235, 235, 245, .8); --separator: rgba(84, 84, 88, .9);
    --on-accent: #000000;
  }
}

/* Transparência e movimento reduzidos */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-bg: var(--bg-2); --glass-blur: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}