/* --- base.css --- */
/* Zela — base. Minimal resets so cards, kits and consumer pages start on brand. */
body{background:var(--surface-base);color:var(--text-body);font-family:var(--font-body);font-size:var(--body-md);line-height:var(--body-leading);-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--dur-quick) var(--ease-calm)}
a:hover{color:var(--text-link-hover)}
::selection{background:var(--lilac-400);color:var(--ink-500)}
:focus-visible{outline:2px solid var(--mauve-500);outline-offset:2px;border-radius:var(--radius-xs)}


/* --- colors.css --- */
/* Zela — color.
   EXACT values sampled pixel-for-pixel from the brand handoff PNGs (LOGOTIPO/, ILUSTRAÇÃO/).
   The secondary, grey, tint and feedback ramps are now EXACT values read from the Figma file's
   "Cores Zela" variable collection (35 variables) — see tokens/fig-tokens.css for the raw
   marca/* · cinzas/* · secundaria/* · sistema/* tokens as Figma names them. */
:root{
  /* --- Base ramp: exact --- */
  --cream-100:#F8F8E8;   /* tint of --cream-300, for stacked surfaces */
  --cream-200:#F5F6DE;
  --cream-300:#F1F2D1;   /* EXACT — brand base background ("amarelo") */
  --cream-400:#E3E4BE;   /* hairline / divider on cream */
  --cream-500:#D4CDB8;   /* EXACT — antialias edge tone, used for muted strokes */
  --terracotta-300:#BC827C;/* marca/terracota-marca-20 */
  --terracotta-400:#AD625B;/* marca/terracota-marca-40 — hover step */
  --terracotta-500:#9E473E;/* EXACT — primary brand red ("vermelho") */
  --terracotta-600:#8A3B33;/* pressed */
  --mauve-300:#BEAEB5;   /* marca/roxo-marca-20 */
  --mauve-400:#A28A95;   /* marca/roxo-marca-40 */
  --mauve-500:#7D5D6C;   /* EXACT — brand plum/mauve ("roxo") */
  --mauve-600:#684B58;   /* pressed */
  --ink-500:#383838;     /* EXACT — illustration line + body ink ("preto") */
  --ink-400:#5A5A5A;
  --paper-000:#EFEFEF;   /* EXACT — cinzas/branco-marca (never pure #fff) */
  --grey-40:#D9D9D9;     /* cinzas/cinza-40 */
  --grey-60:#A3A3A3;     /* cinzas/cinza-60 */
  --grey-80:#6E6E6E;     /* cinzas/cinza-80 */

  /* --- Secondary ramp: EXACT, Figma collection "Cores Zela" (secundaria/*) --- */
  --plum-700:#74404B;        /* secundaria/vinho */
  --lilac-400:#AA96BB;       /* secundaria/lavanda-suave */
  --lavender-300:#BCB3E8;    /* secundaria/lavanda */
  --sage-400:#A7C493;        /* secundaria/verde-salvia */
  --forest-600:#12843E;      /* secundaria/verde-floresta */
  --dust-blue-400:#82A0B5;   /* secundaria/azul-aco */
  --petrol-600:#3A788A;      /* secundaria/azul-petroleo */
  --blue-600:#366AC0;        /* secundaria/azul */
  --amber-400:#F0CD7E;       /* secundaria/dourado */
  --orange-500:#DD8A47;      /* secundaria/laranja */
  --rose-300:#F7D2D2;        /* secundaria/rosa-claro */
  --rose-500:#C28597;        /* secundaria/rosa-antigo */
  --olive-500:#746F4A;       /* secundaria/oliva */
  --olive-700:#5E5D3D;       /* secundaria/oliva-escuro */
  --grey-lilac-400:#9998A2;  /* secundaria/cinza-lilas */

  /* --- Semantic surfaces --- */
  --surface-base:var(--cream-300);
  --surface-raised:var(--cream-100);
  --surface-ink:var(--ink-500);
  --surface-primary:var(--terracotta-500);
  --surface-secondary:var(--mauve-500);
  --surface-community:var(--sage-400);
  --surface-serene:var(--dust-blue-400);
  --surface-warm:var(--amber-400);

  /* --- Semantic text --- */
  --text-body:var(--ink-500);
  --text-muted:#6B6257;
  --text-heading:var(--terracotta-500);
  --text-script:var(--mauve-500);
  --text-on-dark:var(--cream-300);
  --text-on-primary:var(--cream-300);
  --text-link:var(--terracotta-500);
  --text-link-hover:var(--terracotta-600);

  /* --- Borders --- */
  --border-hairline:var(--cream-400);
  --border-strong:var(--ink-500);
  --border-muted:rgba(56,56,56,.18);

  /* --- Emotional check-in states (Alinhamento de emoções) --- */
  --emotion-leve:var(--amber-400);        /* Leve e Alegre — dourado */
  --emotion-ansiedade:var(--lilac-400);   /* Com Ansiedade */
  --emotion-ansioso:var(--terracotta-500);/* Ansioso */
  --emotion-pesado:var(--mauve-500);      /* Pesado ou Distante */
  --emotion-cansado:var(--dust-blue-400); /* Cansado — azul-aço */

  /* --- Feedback: EXACT, Figma collection "Cores Zela" (sistema/*) --- */
  --feedback-positive:#16A34A;       /* sistema/verde-confirmacao */
  --feedback-positive-soft:#4ADE80;  /* sistema/verde-confirmacao-suave */
  --feedback-critical:#DC2626;       /* sistema/vermelho-erro */
  --feedback-critical-soft:#EF4444;  /* sistema/vermelho-erro-suave */
  --feedback-attention:var(--orange-500);
}


/* --- typography.css --- */
/* Zela — typography. Three roles only: the wordmark (image asset), a handwritten
   voice for display, and a spaced mono for everything else.
   Sizes are the EXACT "Fontes" collection from the Figma file (see tokens/zela-figma.css);
   usage counts from the file confirm the split: Noteworthy Light appears only at 40px,
   Source Code Pro carries 12–24px across SemiBold/Medium/Regular. */
:root{
  --font-script:"Noteworthy","Patrick Hand","Bradley Hand",cursive;
  --font-mono:"Source Code Pro",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-body:var(--font-mono);

  /* Handwritten display — Noteworthy Light. The file uses 40px almost exclusively. */
  --script-display:var(--fontes-display);        /* 40px */
  --script-display-small:var(--fontes-display-small); /* 32px */
  --script-leading:1.14;
  --script-weight:300;
  --script-weight-strong:700;

  /* Mono headings — Source Code Pro SemiBold */
  --h1:var(--fontes-h1);   /* 32px */
  --h2:var(--fontes-h2);   /* 24px */
  --h3:var(--fontes-h3);   /* 20px */
  --heading-weight:600;

  /* Mono body — Source Code Pro Regular/Medium */
  --body-lg:var(--fontes-body-large);  /* 16px */
  --body-md:var(--fontes-body);        /* 14px */
  --body-sm:var(--fontes-caption-regular); /* 12px */
  --body-leading:1.62;
  --body-weight:400;

  /* Mono UI labels — always tracked; uppercase for nav/eyebrows */
  --label-lg:var(--fontes-button);     /* 14px */
  --label-md:var(--fontes-label);      /* 12px */
  --label-sm:var(--fontes-overline);   /* 12px */
  --label-tracking:.14em;
  --label-tracking-tight:.06em;
  --label-weight:500;
  --label-weight-bold:600;             /* caption-bold / overline */
}
.zela-script{font-family:var(--font-script);font-weight:var(--script-weight);line-height:var(--script-leading);color:var(--text-script)}
.zela-label{font-family:var(--font-mono);font-size:var(--label-md);font-weight:var(--label-weight);letter-spacing:var(--label-tracking);text-transform:uppercase}
.zela-body{font-family:var(--font-body);font-size:var(--body-md);font-weight:var(--body-weight);line-height:var(--body-leading);letter-spacing:var(--label-tracking-tight);color:var(--text-body);text-wrap:pretty}


/* --- spacing.css --- */
/* Zela — spacing. 4px base, generous vertical rhythm ("o app respira"). */
:root{
  --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;
  --space-16:64px;
  --space-20:80px;
  --gutter-screen:24px;   /* mobile screen side padding */
  --gutter-section:40px;  /* between major screen blocks */
  --tap-min:48px;         /* accessibility: Sandra's tired thumb */
  --measure:60ch;         /* max reading width for mono body */
}


/* --- radii.css --- */
/* Zela — radii. Soft, hand-made, never sharp; pills for actions, big soft cards. */
:root{
  --radius-xs:8px;
  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:26px;
  --radius-xl:36px;
  --radius-card:var(--radius-lg);
  --radius-pill:999px;
  --radius-aura:50%;
  --border-width:1.5px;
  --border-width-hand:2px; /* hand-drawn feel: slightly thicker than hairline */
}


/* --- elevation.css --- */
/* Zela — elevation. Shadows are warm and diffuse (light through a window), never neutral grey.
   Tinted with the ink/plum of the palette so cards feel printed on paper, not floating in glass. */
:root{
  --shadow-none:none;
  --shadow-sm:0 1px 2px rgba(56,56,56,.06),0 2px 8px rgba(110,59,68,.05);
  --shadow-md:0 2px 4px rgba(56,56,56,.05),0 8px 24px rgba(110,59,68,.08);
  --shadow-lg:0 4px 8px rgba(56,56,56,.05),0 18px 48px rgba(110,59,68,.12);
  --shadow-aura:0 0 56px 18px rgba(170,150,187,.28); /* soft glow under the pastel auras */
  --shadow-inset-press:inset 0 2px 6px rgba(56,56,56,.14);
  --scrim-bottom:linear-gradient(to top,rgba(56,56,56,.55),rgba(56,56,56,0)); /* @kind other */
  --blur-veil:saturate(1.05) blur(18px); /* @kind other */
}


/* --- gradients.css --- */
/* Zela — gradients + grain. The signature: radial "aura" gradients (soft light in the centre)
   and vertical cream→colour washes, with a grain texture over everything (papel/vida).
   The aura changes with emotional state — one gradient per feeling. */
:root{
  --grad-aura-warm:radial-gradient(70% 66% at 50% 38%,#FAF0DC 0%,var(--amber-400) 48%,var(--orange-500) 100%); /* @kind other */
  --grad-aura-plum:radial-gradient(70% 66% at 50% 38%,var(--rose-300) 0%,var(--mauve-300) 46%,var(--lilac-400) 100%); /* @kind other */
  --grad-aura-serene:radial-gradient(70% 66% at 50% 38%,#E7EFF3 0%,#B4C7D3 48%,var(--dust-blue-400) 100%); /* @kind other */
  --grad-aura-sage:radial-gradient(70% 66% at 50% 38%,var(--cream-200) 0%,#CBDCBB 50%,var(--sage-400) 100%); /* @kind other */
  --grad-wash-cream-terracotta:linear-gradient(180deg,var(--cream-300) 0%,#EED6C4 58%,var(--terracotta-300) 100%); /* @kind other */
  --grad-wash-cream-lilac:linear-gradient(180deg,var(--cream-300) 0%,var(--rose-300) 60%,var(--mauve-300) 100%); /* @kind other */
  --grad-wash-cream-sage:linear-gradient(180deg,var(--cream-300) 0%,#DEE9D3 60%,var(--sage-400) 100%); /* @kind other */
  --grad-veil-cream:linear-gradient(180deg,rgba(241,242,209,0) 0%,rgba(241,242,209,.92) 72%); /* @kind other */

  /* Procedural grain — overlay it on gradients and colour blocks at 18–35% opacity. */
  --texture-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); /* @kind other */
  --grain-opacity:.14; /* @kind other */
}
/* Utility: put grain on any element without an extra DOM node. */
.zela-grain{position:relative;isolation:isolate}
.zela-grain::after{content:"";position:absolute;inset:0;background-image:var(--texture-grain);background-size:160px 160px;opacity:var(--grain-opacity);mix-blend-mode:multiply;pointer-events:none;border-radius:inherit}


/* --- motion.css --- */
/* Zela — motion. Nothing snaps. Everything breathes: slow, soft, entering from calm.
   No bounce, no spring overshoot, no attention-grabbing motion.
   --dur-quick: state feedback (hover/press) · --dur-base: controls entering/leaving
   --dur-soft: sheets and aura colour changes · --dur-breathe: the ambient aura pulse */
:root{
  --ease-calm:cubic-bezier(.25,.8,.35,1); /* @kind other */
  --ease-breathe:cubic-bezier(.4,0,.4,1); /* @kind other */
  --dur-quick:140ms; /* @kind other */
  --dur-base:260ms; /* @kind other */
  --dur-soft:480ms; /* @kind other */
  --dur-breathe:6s; /* @kind other */
  --press-scale:.985; /* @kind other */
  --hover-lift:-1px; /* @kind other */
}
@keyframes zela-breathe{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.035);opacity:1}}
@keyframes zela-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){:root{--dur-quick:0ms; /* @kind other */ --dur-base:0ms; /* @kind other */ --dur-soft:0ms; /* @kind other */}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}}


/* --- zela-figma.css --- */
/* Zela — the four token collections the Figma file's own variables define.
   EXACT values, Figma names preserved. This is the authoritative source for the palette
   and the type scale; tokens/colors.css and tokens/typography.css alias these into
   semantic names. The full tokens/fig-tokens.css dump is kept unimported as a raw
   reference — most of it belongs to third-party kits (Material 3, iOS, SnowUI) that
   happen to live in the same Figma file and are NOT part of Zela's system. */
:root{
  /* ---- Collection: Cores Zela (35) ---- */
  --cinzas-branco-marca: rgb(239,239,239); /* @kind color */
  --cinzas-cinza-20: rgb(239,239,239); /* @kind color */
  --cinzas-cinza-40: rgb(217,217,217); /* @kind color */
  --cinzas-cinza-60: rgb(163,163,163); /* @kind color */
  --cinzas-cinza-80: rgb(110,110,110); /* @kind color */
  --cinzas-preto-marca: rgb(56,56,56); /* @kind color */
  --marca-creme-seguranca: rgb(241,242,209); /* @kind color */
  --marca-roxo-cuidado: rgb(125,93,108); /* @kind color */
  --marca-roxo-marca-20: rgb(190,174,181); /* @kind color */
  --marca-roxo-marca-40: rgb(162,138,149); /* @kind color */
  --marca-roxo-marca: rgb(125,93,108); /* @kind color */
  --marca-terracota-marca-20: rgb(188,130,124); /* @kind color */
  --marca-terracota-marca-40: rgb(173,98,91); /* @kind color */
  --marca-terracota-marca: rgb(158,71,62); /* @kind color */
  --secundaria-azul-aco: rgb(130,160,181); /* @kind color */
  --secundaria-azul-petroleo: rgb(58,120,138); /* @kind color */
  --secundaria-azul: rgb(54,106,192); /* @kind color */
  --secundaria-cinza-lilas: rgb(153,152,162); /* @kind color */
  --secundaria-dourado: rgb(240,205,126); /* @kind color */
  --secundaria-laranja: rgb(221,138,71); /* @kind color */
  --secundaria-lavanda-suave: rgb(170,150,187); /* @kind color */
  --secundaria-lavanda: rgb(188,179,232); /* @kind color */
  --secundaria-oliva-escuro: rgb(94,93,61); /* @kind color */
  --secundaria-oliva: rgb(116,111,74); /* @kind color */
  --secundaria-rosa-antigo: rgb(194,133,151); /* @kind color */
  --secundaria-rosa-claro: rgb(247,210,210); /* @kind color */
  --secundaria-verde-floresta: rgb(18,132,62); /* @kind color */
  --secundaria-verde-salvia: rgb(167,196,147); /* @kind color */
  --secundaria-vinho: rgb(116,64,75); /* @kind color */
  --sistema-branco-sistema: rgb(255,255,255); /* @kind color */
  --sistema-preto-sistema: rgb(0,0,0); /* @kind color */
  --sistema-verde-confirmacao-suave: rgb(74,222,128); /* @kind color */
  --sistema-verde-confirmacao: rgb(22,163,74); /* @kind color */
  --sistema-vermelho-erro-suave: rgb(239,68,68); /* @kind color */
  --sistema-vermelho-erro: rgb(220,38,38); /* @kind color */

  /* ---- Collection: Fontes (15) — font sizes in px ---- */
  --fontes-display:40px; /* @kind font */
  --fontes-display-small:32px; /* @kind font */
  --fontes-h1:32px; /* @kind font */
  --fontes-h1-semibold:32px; /* @kind font */
  --fontes-h2:24px; /* @kind font */
  --fontes-h3:20px; /* @kind font */
  --fontes-body-large:16px; /* @kind font */
  --fontes-body-large-semibold:16px; /* @kind font */
  --fontes-body:14px; /* @kind font */
  --fontes-body-semibold:14px; /* @kind font */
  --fontes-button:14px; /* @kind font */
  --fontes-caption-bold:12px; /* @kind font */
  --fontes-caption-regular:12px; /* @kind font */
  --fontes-label:12px; /* @kind font */
  --fontes-overline:12px; /* @kind font */

  /* ---- Collection: Espaçamentos (8) ---- */
  --espacamento-4px:4px; /* @kind spacing */
  --espacamento-8px:8px; /* @kind spacing */
  --espacamento-12px:12px; /* @kind spacing */
  --espacamento-16px:16px; /* @kind spacing */
  --espacamento-24px:24px; /* @kind spacing */
  --espacamento-32px:32px; /* @kind spacing */
  --espacamento-48px:48px; /* @kind spacing */
  /* ---- Compat: raw token names referenced verbatim by the extracted app-layer
     components. Kept so their geometry/colour resolves without editing generated code. ---- */
  --12px:12px; /* @kind spacing */
  --black-100-2:#000000; /* @kind color */
  --labels-primary:#000000; /* @kind color */
  --colors-blue:#007AFF; /* @kind color */
  --grays-white:#FFFFFF; /* @kind color */
}


/* --- fontes --- */
@font-face{font-family:"Source Code Pro";src:url("/assets/fonts/SourceCodePro-VariableFont_wght.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Patrick Hand";src:url("/assets/fonts/PatrickHand-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}


/* A manuscrita da marca era Noteworthy, fonte de sistema da Apple: licenciada
   para uso no aparelho, não para redistribuição num site. Patrick Hand é
   manuscrita sob OFL — pode ser servida, e fica igual em todo aparelho em vez
   de virar serifada em quem não usa Apple. */
:root {
  --font-script: "Patrick Hand", "Noteworthy", "Bradley Hand", cursive;
}


/* --- styles.css --- */
@import url("tokens/zela-figma.css");
@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/radii.css");
@import url("tokens/elevation.css");
@import url("tokens/gradients.css");
@import url("tokens/motion.css");
@import url("components/conteudo/fig-assets.css");
@import url("components/marca/fig-assets.css");
@import url("tokens/base.css");


*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}