/* =========================================================
   Mapa Nail — tokens do design system ("O Atelier de Vidro")
   Fonte da verdade: DESIGN.md. A paleta vem de assets/logo.svg.
   Camadas: 1) primitivos  →  2) semânticos  →  3) componentes
   Componentes (styles.css) usam só as camadas 2 e 3.
   ========================================================= */

/* ---------- 1. PRIMITIVOS — valores crus, nunca usados direto em componentes ---------- */
:root {
  /* Oliva (fundo da logo: #8b9359 → #646b3c → #434a29, sombra #283013) */
  --mn-olive-100: #edefe0;
  --mn-olive-200: #dce2c1;
  --mn-olive-300: #c1ca97;
  --mn-olive-400: #8b9359;
  --mn-olive-500: #646b3c;
  --mn-olive-600: #434a29;
  --mn-olive-700: #283013;
  --mn-olive-800: #1d2012;
  --mn-olive-900: #12140b;
  --mn-olive-dark-soft: #2e3419;

  /* Coral (unha da logo: #f0a18d → #dc7a64) */
  --mn-coral-100: #fcebe5;
  --mn-coral-200: #fbd9cf;
  --mn-coral-300: #f0a18d;
  --mn-coral-400: #e9856f;
  --mn-coral-500: #dc7a64;
  --mn-coral-700: #9a402d;
  --mn-coral-900: #3f1510;
  --mn-coral-950: #2a0f0b;
  --mn-coral-dark-soft: #4a2723;
  --mn-coral-dark-tint: #3a2220;

  /* Lilás (brilho da logo: #b7afee) */
  --mn-lilac-100: #f1effc;
  --mn-lilac-200: #e2def9;
  --mn-lilac-300: #c3bbfa;
  --mn-lilac-400: #b7afee;
  --mn-lilac-700: #5b52b0;
  --mn-lilac-dark-soft: #2e2a52;
  --mn-lilac-dark-tint: #232441;

  /* Ouro de conquista (tesouro da Trilha) */
  --mn-gold-200: #ffe39a;
  --mn-gold-400: #f2b33d;
  --mn-gold-600: #b57900;
  --mn-gold-700: #8a5300;
  --mn-gold-900: #5e4006;

  /* Creme (pin da logo: #fefefb → #efebdb) */
  --mn-cream-50: #fefefb;
  --mn-cream-200: #efebdb;
  --mn-ivory: #f2f3e9;

  /* canais RGB para sombras/véus com opacidade: rgb(var(--x-rgb) / .3) */
  --mn-shadow-rgb: 40 48 19;      /* #283013 — sombra da logo */
  --mn-label-rgb: 29 32 18;       /* #1d2012 */
  --mn-ivory-rgb: 242 243 233;    /* #f2f3e9 */
  --mn-cream-rgb: 254 254 251;    /* #fefefb */
  --mn-olive-rgb: 100 107 60;     /* #646b3c */
  --mn-coral-rgb: 220 122 100;    /* #dc7a64 */
  --mn-lilac-rgb: 183 175 238;    /* #b7afee */
  --mn-gold-rgb: 242 179 61;      /* #f2b33d */

  /* tipografia */
  --mn-font-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
  --mn-font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, 'Segoe UI', sans-serif;
  --mn-font-round: ui-rounded, 'SF Pro Rounded', -apple-system, 'Inter', system-ui, sans-serif;

  /* escalas */
  --mn-space-1: 4px;  --mn-space-2: 8px;  --mn-space-3: 12px; --mn-space-4: 16px;
  --mn-space-5: 20px; --mn-space-6: 24px; --mn-space-8: 34px;
  --mn-radius-xs: 6px;  --mn-radius-sm: 12px; --mn-radius-field: 16px; --mn-radius-md: 18px;
  --mn-radius-lg: 26px; --mn-radius-xl: 32px; --mn-radius-map: 36px;  --mn-radius-pill: 999px;
}

/* ---------- 2. SEMÂNTICOS — papéis (claro) ---------- */
:root {
  /* primária — oliva */
  --olive-light: var(--mn-olive-400);
  --olive: var(--mn-olive-500);
  --olive-deep: var(--mn-olive-600);   /* texto oliva sobre creme (7,8:1) */
  --olive-ink: var(--mn-olive-700);    /* números grandes */
  --olive-soft: var(--mn-olive-200);
  --olive-tint: var(--mn-olive-100);
  --olive-rgb: var(--mn-olive-rgb);

  /* secundária — coral */
  --coral-light: var(--mn-coral-300);
  --coral: var(--mn-coral-500);
  --coral-deep: var(--mn-coral-700);   /* texto coral / alerta (5,6:1) */
  --coral-soft: var(--mn-coral-200);
  --coral-tint: var(--mn-coral-100);
  --coral-rgb: var(--mn-coral-rgb);
  --on-coral: var(--mn-coral-900);     /* texto SOBRE coral — nunca branco */

  /* terciária — lilás */
  --lilac: var(--mn-lilac-400);
  --lilac-deep: var(--mn-lilac-700);   /* foco e texto lilás (5,4:1) */
  --lilac-soft: var(--mn-lilac-200);
  --lilac-tint: var(--mn-lilac-100);
  --lilac-rgb: var(--mn-lilac-rgb);

  /* funcional — ouro (só conquista) */
  --gold-light: var(--mn-gold-200);
  --gold: var(--mn-gold-400);
  --gold-shade: var(--mn-gold-600);
  --gold-deep: var(--mn-gold-700);
  --gold-ink: var(--mn-gold-900);      /* texto SOBRE ouro */
  --gold-rgb: var(--mn-gold-rgb);

  /* neutras */
  --bg: var(--mn-cream-200);
  --cream: var(--mn-cream-50);
  --label: var(--mn-olive-800);
  --label-2: rgb(var(--mn-label-rgb) / 0.7);
  --label-3: rgb(var(--mn-label-rgb) / 0.64);
  --sep: rgb(var(--mn-label-rgb) / 0.1);
  --fill: rgb(var(--mn-olive-rgb) / 0.1);
  --fill-2: rgb(var(--mn-label-rgb) / 0.06);
  --shadow-rgb: var(--mn-shadow-rgb);

  --accent-ink: var(--olive-deep);
  --on-accent: var(--mn-cream-50);

  /* superfícies e vidro */
  --surface: rgb(255 255 255 / 0.5);
  --surface-strong: rgb(var(--mn-cream-rgb) / 0.9);
  --glass-fill-top: rgb(255 255 255 / 0.36);
  --glass-fill-bot: rgb(255 255 255 / 0.12);
  --glass-border: rgb(255 255 255 / 0.55);
  --glass-hi: rgb(255 255 255 / 0.9);
  --glass-lo: rgb(var(--mn-label-rgb) / 0.05);
  --rim-a: rgb(255 255 255 / 0.98);
  --rim-b: rgb(255 255 255 / 0.1);
  --rim-c: rgb(255 255 255 / 0.75);

  /* sombras (sempre tingidas com a sombra da logo) */
  --glass-shadow: 0 1px 2px rgb(var(--shadow-rgb) / 0.06), 0 18px 40px -18px rgb(var(--shadow-rgb) / 0.32), 0 40px 70px -40px rgb(var(--shadow-rgb) / 0.24);
  --thick: inset 0 12px 20px -14px rgb(255 255 255 / 0.9), inset 0 -14px 24px -16px rgb(var(--shadow-rgb) / 0.16);
  --fringe: inset 2px 0 2px -1px rgb(var(--coral-rgb) / 0.22), inset -2px 0 2px -1px rgb(var(--lilac-rgb) / 0.3);

  /* degradês de marca (tiles de ícone, nós, barras) */
  --grad-olive: linear-gradient(145deg, var(--olive-light), var(--olive));
  --grad-olive-deep: linear-gradient(145deg, var(--olive-light), var(--olive-deep));
  --grad-coral: linear-gradient(145deg, var(--coral-light), var(--coral));
  --grad-coral-deep: linear-gradient(145deg, var(--coral-light), var(--coral-deep));
  --grad-lilac: linear-gradient(145deg, var(--lilac), var(--lilac-deep));
  --grad-gold: linear-gradient(145deg, var(--gold), var(--gold-shade));

  /* fundo vivo: degradê suave oliva/coral/lilás */
  --bg-wash-1: var(--olive-light);
  --bg-wash-2: var(--coral-light);
  --bg-wash-3: var(--lilac);

  --font: var(--mn-font-text);
  --font-display: var(--mn-font-display);
  --font-round: var(--mn-font-round);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  color-scheme: light;
}

/* ---------- 2. SEMÂNTICOS — modo escuro: os tons claros da logo viram texto ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --olive-light: #a2aa79;
    --olive: var(--mn-olive-400);        /* preenchimento; texto --on-accent (5,5:1) */
    --olive-deep: var(--mn-olive-300);   /* texto oliva (10,8:1) */
    --olive-ink: #e3e8cc;
    --olive-soft: var(--mn-olive-dark-soft);
    --olive-tint: #22271299;
    --olive-rgb: 139 147 89;

    --coral-light: var(--mn-coral-300);
    --coral: var(--mn-coral-400);
    --coral-deep: var(--mn-coral-300);   /* texto coral (9:1) */
    --coral-soft: var(--mn-coral-dark-soft);
    --coral-tint: var(--mn-coral-dark-tint);
    --coral-rgb: 233 133 111;
    --on-coral: var(--mn-coral-950);

    --lilac: var(--mn-lilac-400);
    --lilac-deep: var(--mn-lilac-300);   /* texto lilás (10,4:1) */
    --lilac-soft: var(--mn-lilac-dark-soft);
    --lilac-tint: var(--mn-lilac-dark-tint);

    --gold-deep: var(--mn-gold-400);

    --bg: var(--mn-olive-900);
    --label: var(--mn-ivory);
    --label-2: rgb(var(--mn-ivory-rgb) / 0.68);
    --label-3: rgb(var(--mn-ivory-rgb) / 0.56);
    --sep: rgb(var(--mn-ivory-rgb) / 0.12);
    --fill: rgb(139 147 89 / 0.16);
    --fill-2: rgb(var(--mn-ivory-rgb) / 0.08);
    --shadow-rgb: 0 0 0;

    --on-accent: #151809;

    --surface: rgb(40 44 28 / 0.46);
    --surface-strong: rgb(44 48 30 / 0.92);
    --glass-fill-top: rgb(255 255 255 / 0.13);
    --glass-fill-bot: rgb(255 255 255 / 0.035);
    --glass-border: rgb(255 255 255 / 0.16);
    --glass-hi: rgb(255 255 255 / 0.3);
    --glass-lo: rgb(0 0 0 / 0.25);
    --rim-a: rgb(255 255 255 / 0.55);
    --rim-b: rgb(255 255 255 / 0.03);
    --rim-c: rgb(255 255 255 / 0.32);

    --glass-shadow: 0 1px 1px rgb(0 0 0 / 0.25), 0 14px 36px -10px rgb(0 0 0 / 0.6);
    --thick: inset 0 12px 20px -14px rgb(255 255 255 / 0.22), inset 0 -14px 24px -16px rgb(0 0 0 / 0.4);
    --fringe: inset 2px 0 2px -1px rgb(var(--coral-rgb) / 0.2), inset -2px 0 2px -1px rgb(var(--lilac-rgb) / 0.24);

    color-scheme: dark;
  }
}

/* ---------- 3. COMPONENTES — medidas e formas reutilizadas ---------- */
:root {
  --r-xs: var(--mn-radius-xs);
  --r-sm: var(--mn-radius-sm);
  --r-field: var(--mn-radius-field);
  --r-md: var(--mn-radius-md);
  --r-lg: var(--mn-radius-lg);     /* card */
  --r-xl: var(--mn-radius-xl);     /* hero, pergunta, sheet */
  --r-map: var(--mn-radius-map);
  --r-pill: var(--mn-radius-pill);

  --gutter: var(--mn-space-4);     /* margem lateral */
  --card-gap: 14px;                /* entre cards */
  --card-pad: var(--mn-space-5);
  --section-gap: var(--mn-space-8);

  --btn-h: 52px;
  --btn-h-sm: 44px;                /* nunca menos: alvo mínimo */
  --field-h: 52px;
  --tap-min: 44px;
  --tab-w: 66px;
  --tab-h: 56px;
  --column-max: 560px;

  --blur-glass: blur(16px) saturate(190%);
  --blur-bar: blur(30px) saturate(210%);
  --blur-sheet: blur(40px) saturate(200%);

  --focus-ring: 2.5px solid var(--lilac-deep);
  --ease-bounce: cubic-bezier(.3, 1.4, .5, 1);  /* única curva CSS para movimento */
}