/* =====================================================================
   PORTAL DE EDUCAÇÃO — DESIGN SYSTEM DA HOME COMERCIAL
   Fonte única de valores visuais. Nenhum outro arquivo da Home declara
   cor, sombra, raio, espaço, fonte ou curva de movimento "solta".

   Direção: escuro quente premium. A luz vem do cobre/bronze do símbolo
   oficial (gradiente do "P"), nunca de neon. Rosa e ouro são as cores
   do tema "Padrão" do próprio produto (AdminConfiguracaoService::presets).
   ===================================================================== */

@font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-garamond-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-garamond-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-garamond-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-garamond-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dm-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dm-sans-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dm-sans-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Syne'; src: url('/assets/fonts/syne-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Syne'; src: url('/assets/fonts/syne-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  /* ---------- COLOR SYSTEM ------------------------------------------ */
  --color-ink-0: #070504;          /* fundo mais profundo (cenas de foco) */
  --color-ink-1: #0d0907;          /* fundo base da página */
  --color-ink-2: #15100d;          /* superfície elevada */
  --color-ink-3: #1e1713;          /* superfície de cartão */
  --color-cream: #f3e6d6;
  --color-copper-50: #f7e3cc;
  --color-copper-200: #e9c6a1;     /* luz do "P" oficial */
  --color-copper-400: #c99366;
  --color-copper-600: #9b6440;
  --color-copper-800: #5a3622;     /* sombra do "P" oficial */
  --color-gold: #b8924a;           /* tema Padrão — primária */
  --color-rose: #a96f79;           /* tema Padrão — secundária */
  --color-success: #93c29b;

  /* Temas REAIS do produto (white label) — mesma fonte que o painel admin. */
  --theme-padrao-1: #b8924a;  --theme-padrao-2: #a96f79;
  --theme-azul-1: #4a7fa6;    --theme-azul-2: #6e8fa9;
  --theme-verde-1: #5c8f63;   --theme-verde-2: #7ba98a;
  --theme-vermelho-1: #b0584a; --theme-vermelho-2: #a9726f;

  /* ---------- TEXT -------------------------------------------------- */
  --text-1: #f6ede3;
  --text-2: rgba(246, 237, 227, 0.74);
  --text-3: rgba(246, 237, 227, 0.58); /* ≥ 4.5:1 sobre ink-1/ink-2 */
  --text-inverse: #170f0a;

  /* ---------- ACCENT ------------------------------------------------ */
  --accent-1: var(--color-copper-200);
  --accent-2: var(--color-copper-400);
  --accent-gradient: linear-gradient(115deg, var(--color-copper-50) 0%, var(--color-copper-200) 28%, var(--color-copper-400) 58%, var(--color-copper-600) 100%);
  --accent-gradient-soft: linear-gradient(115deg, rgba(233, 198, 161, 0.18), rgba(155, 100, 64, 0.06));

  /* ---------- SURFACE SYSTEM (vidro escuro em camadas) -------------- */
  --surface-1: rgba(255, 240, 225, 0.035);
  --surface-2: rgba(255, 240, 225, 0.06);
  --surface-3: rgba(255, 240, 225, 0.1);
  --surface-glass: rgba(21, 16, 13, 0.62);
  --surface-blur: 18px;

  /* ---------- BORDER ------------------------------------------------ */
  --border-1: rgba(233, 198, 161, 0.1);
  --border-2: rgba(233, 198, 161, 0.2);
  --border-3: rgba(233, 198, 161, 0.42);
  --border-light: linear-gradient(140deg, rgba(247, 227, 204, 0.55), rgba(233, 198, 161, 0.08) 40%, rgba(233, 198, 161, 0.02) 60%, rgba(201, 147, 102, 0.4));

  /* ---------- LIGHT SYSTEM ------------------------------------------ */
  --glow-copper: 0 0 60px -12px rgba(233, 165, 110, 0.55);
  --glow-soft: 0 0 120px -30px rgba(233, 165, 110, 0.45);
  --glow-text: 0 0 40px rgba(233, 165, 110, 0.25);
  --light-key: radial-gradient(60% 50% at 70% 30%, rgba(233, 165, 110, 0.18), transparent 70%);
  --grain-opacity: 0.045;

  /* ---------- SHADOW SYSTEM (cinematográfico: longo e quente) -------- */
  --shadow-1: 0 1px 0 rgba(255, 240, 225, 0.05) inset, 0 10px 30px -18px rgba(0, 0, 0, 0.9);
  --shadow-2: 0 1px 0 rgba(255, 240, 225, 0.06) inset, 0 30px 60px -30px rgba(0, 0, 0, 0.95);
  --shadow-3: 0 1px 0 rgba(255, 240, 225, 0.08) inset, 0 60px 120px -40px rgba(0, 0, 0, 1), 0 0 0 1px rgba(233, 198, 161, 0.08);
  --shadow-device: 0 80px 140px -50px rgba(0, 0, 0, 0.95), 0 30px 60px -30px rgba(90, 54, 34, 0.55);

  /* ---------- RADIUS ------------------------------------------------ */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* ---------- SPACING SYSTEM (escala 4px + fluida) ------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-section: clamp(5.5rem, 10vw, 10.5rem);
  --space-gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* ---------- CONTAINER --------------------------------------------- */
  --container-max: 1360px;
  --container-text: 62ch;
  --container: min(100% - 2 * var(--space-gutter), var(--container-max));

  /* ---------- TYPOGRAPHY SYSTEM ------------------------------------- */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Syne', 'DM Sans', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-mega: clamp(2.9rem, 6.4vw, 7rem);
  --fs-hero: clamp(2.6rem, 5.2vw, 5.8rem);
  --fs-h2: clamp(2.1rem, 3.7vw, 3.9rem);
  --fs-h3: clamp(1.4rem, 1.8vw, 1.8rem);
  --fs-lead: clamp(1.05rem, 0.85vw + 0.6rem, 1.22rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.72rem;
  --lh-tight: 0.94;
  --lh-title: 1.04;
  --lh-body: 1.62;
  --tracking-label: 0.22em;

  /* ---------- MOTION SYSTEM ----------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* entrada: rápida, assenta suave */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* transições de cena */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* feedback físico (botões) */
  --ease-cinema: cubic-bezier(0.22, 1, 0.36, 1);    /* reveals longos */
  --duration-instant: 120ms;
  --duration-fast: 220ms;
  --duration-base: 420ms;
  --duration-slow: 900ms;
  --duration-cinema: 1400ms;
  --motion-distance: 48px;  /* deslocamento padrão de reveal */
  --motion-stagger: 70ms;   /* atraso entre itens de um grupo */

  /* ---------- Z LAYERS ---------------------------------------------- */
  --z-background: -1;
  --z-base: 1;
  --z-raised: 5;
  --z-sticky: 40;
  --z-header: 60;
  --z-menu: 55;   /* abaixo do header: a marca e o botão fechar continuam visíveis */
  --z-intro: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
    --duration-cinema: 1ms;
    --motion-distance: 0px;
    --motion-stagger: 0ms;
  }
}