/* ============================================================
   TOKENS DO SISTEMA — Luart Designer
   Derivado do kit-site (caso Educa+IA). Nomes mantidos, valores trocados.
   Nenhum componente usa cor literal fora deste bloco.
   ============================================================ */

:root{
  /* --- marca --- */
  --brand:        #FC6D03;   /* laranja Luart, medido no LOGO OFICIAL.png */
  --brand-deep:   #D65A02;
  --brand-soft:   #FF9140;
  --brand-wash:   rgba(252,109,3,.10);

  /* --- neutros com viés de grafite/madeira --- */
  --ink:          #1B1D21;   /* texto principal — grafite quase preto */
  --ink-2:        #3C4049;   /* texto secundário */
  --ink-3:        #6B707A;   /* texto de apoio */
  --bg:           #FAFAF8;   /* fundo — branco levemente quente */
  --surface:      #FFFFFF;
  --surface-alt:  #F3EEE7;   /* tom madeira clara — cards/fundos alternados */
  --line:         #E4E1DA;

  /* --- semânticas --- */
  --ok:           #238A39;
  --warn:         #D95A0B;
  --info:         #1476FF;

  /* --- gradientes --- */
  --grad-mark:    linear-gradient(135deg,#FF9140 0%,#FC6D03 52%,#D65A02 100%);
  --grad-title:   linear-gradient(180deg,#FF9140 0%,#D65A02 100%);
  --grad-canvas:  linear-gradient(135deg,#FFFFFF 0%,#FAFAF8 58%,#F3EEE7 100%);
  --halo:         radial-gradient(ellipse at 72% 48%, rgba(252,109,3,.14) 0%, rgba(252,109,3,0) 64%);

  /* --- vidro --- */
  --glass:        linear-gradient(135deg, rgba(255,255,255,.90), rgba(243,238,231,.65));
  --glass-border: 1px solid rgba(255,255,255,.95);
  --glass-outline:1px solid rgba(252,109,3,.14);

  /* --- sombras --- */
  --shadow-soft:  0 16px 40px rgba(27,29,33,.08), 0 3px 10px rgba(252,109,3,.06);
  --shadow-lift:  0 30px 80px rgba(20,20,22,.14), 0 6px 20px rgba(252,109,3,.08);

  /* --- tipografia --- */
  --font-display: "Playfair Display", Georgia, serif;
  --font-sans:    "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-body:      clamp(1rem, .96rem + .2vw, 1.06rem);
  --fs-h1:        clamp(2.6rem, 6vw, 4.8rem);
  --fs-h2:        clamp(2rem, 4.2vw, 3.2rem);
  --fs-h3:        clamp(1.1rem, 1.5vw, 1.35rem);

  /* --- espaço e forma --- */
  --gutter:       max(20px, env(safe-area-inset-left, 0px));
  --maxw:         1240px;
  --radius:       18px;
  --radius-lg:    28px;

  color-scheme: light;
}

/* Proteção de texto sobre foto — pílula translúcida */
.pill{
  background:rgba(255,255,255,.88);
  padding:6px 14px;
  border-radius:999px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--ink);
}
.pill--dark{
  background:rgba(27,29,33,.55);
  color:#fff;
}

/* Área de imagem padrão — foto mascarada */
.photo{position:relative;overflow:hidden;border-radius:var(--radius)}
.photo__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.photo::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(27,29,33,0) 55%,
             rgba(27,29,33,.18) 82%,rgba(27,29,33,.42) 100%);
}