/* Tokens do design system Prumo. Cópia gerada de PRUMO/design-system/tokens (não editar aqui; editar lá e copiar de novo). */
/* ---- fonts.css ---- */
/* Satoshi (Indian Type Foundry, licença Fontshare), servida localmente.
   Os .woff2 foram baixados do CDN da Fontshare (os mesmos URLs do dump original)
   para assets/fonts/, então o sistema não depende de terceiro para desenhar. */

@font-face{font-family:"Satoshi";font-style:normal;font-weight:300;font-display:swap;src:url("fontes/satoshi-300-normal.woff2") format("woff2")}
@font-face{font-family:"Satoshi";font-style:normal;font-weight:400;font-display:swap;src:url("fontes/satoshi-400-normal.woff2") format("woff2")}
@font-face{font-family:"Satoshi";font-style:normal;font-weight:500;font-display:swap;src:url("fontes/satoshi-500-normal.woff2") format("woff2")}
@font-face{font-family:"Satoshi";font-style:normal;font-weight:700;font-display:swap;src:url("fontes/satoshi-700-normal.woff2") format("woff2")}

/* ---- colors.css ---- */
/* Paleta Prumo: Bone (Cal), Slate (Chumbo), Terracotta (Linha), Stone (Pedra).
   Rampas em :root. Os tokens semânticos ficam em :root e [data-theme="light"] para que um
   bloco claro dentro de uma página escura volte a resolver certo (ver theme-dark.css).
   Os aliases DEPRECATED do dump (vocabulário sálvia) não foram portados: nada no projeto os usa. */
:root{
  /* --- Base palette: four brand colours, each with a tonal ramp ---
     Bone #F3EFE6 carries every surface · Slate #2A3038 is ink + structure
     Terracotta #D9481C is action, and only action · Stone #8A857B is line + trace */
  --white:#FFFFFF;

  --bone-50:#FBF9F4;
  --bone-100:#F3EFE6;  /* brand paper */
  --bone-200:#EBE5D9;
  --bone-300:#E1DACB;
  --bone-400:#D5CCBA;

  --slate-950:#15191E;  /* adicionado no port: fundo do tema escuro */
  --slate-900:#1C2127;
  --slate-800:#2A3038;  /* brand ink */
  --slate-700:#3B424B;
  --slate-600:#4C545D;
  --slate-500:#5F666E;
  --slate-400:#8A9098;

  --stone-600:#6E6A62;
  --stone-500:#8A857B;  /* brand line */
  --stone-400:#A39F96;
  --stone-300:#BDB9B1;
  --stone-200:#D6D2C9;

  --act-700:#A8340F;
  --act-600:#C43F14;
  --act-500:#D9481C;    /* brand action */
  --act-300:#E2704B;
  --act-200:#F2C9BA;
  --act-100:#FBEAE3;
}

:root,
[data-theme="light"]{
  color-scheme:light;

  /* --- Semantic: ink ---
     Body text stops at slate-500 (5.1:1 on paper). Stone is line, never reading text. */
  --text-strong:var(--slate-800);
  --text-body:var(--slate-500);
  --text-muted:var(--stone-600);
  --text-faint:var(--stone-500);
  --text-on-dark:var(--white);
  --text-on-accent:var(--slate-800);
  --text-link:var(--act-700);
  --text-link-hover:var(--act-500);

  /* --- Semantic: surfaces ---
     Elevation is a step of paper tint, not a shadow: page → card → raised. */
  --surface-page:var(--bone-100);
  --surface-card:var(--bone-50);
  --surface-card-raised:var(--white);
  --surface-sunken:var(--bone-200);
  --surface-inset:var(--bone-300);
  --surface-chip:var(--white);
  --surface-chip-quiet:var(--bone-200);
  --surface-invert:var(--slate-800);
  --surface-accent:var(--bone-300);
  --surface-accent-strong:var(--bone-400);

  /* --- Semantic: hover fills (every interactive fill has a named hover) --- */
  --surface-hover-light:var(--bone-100);
  --surface-hover-quiet:var(--bone-300);
  --surface-hover-bare:var(--bone-200);
  --surface-hover-invert:var(--slate-700);
  --surface-hover-accent:var(--bone-400);

  /* --- Semantic: action. The only chromatic role in the system ---
     One primary action per screen. Fill is act-600, not the base: 5.2:1 with white. */
  --action-fill:var(--act-600);
  --action-fill-hover:var(--act-700);
  --action-fg:var(--white);
  --action-tint:var(--act-100);
  --action-tint-fg:var(--act-700);
  --action-border:var(--act-200);
  --action-focus:var(--act-500);
  --action-on-dark:var(--act-300);

  /* --- Semantic: lines. Stone as alpha over paper, almost never solid. --- */
  --line-hairline:rgba(138,133,123,.32);
  --line-strong:rgba(138,133,123,.55);
  --line-on-dark:rgba(255,255,255,.16);

  /* --- Semantic: status (severity reads as tone, not hue) --- */
  --status-good-bg:var(--white);
  --status-good-fg:var(--slate-800);
  --status-attention-bg:var(--slate-800);
  --status-attention-fg:var(--white);
  --status-active-bg:var(--act-100);
  --status-active-fg:var(--act-700);
  --status-quiet-bg:var(--bone-200);
  --status-quiet-fg:var(--stone-600);

  /* --- Signature gradients: warm paper washes, flat and near-tonal --- */
  --gradient-accent:linear-gradient(148deg,#EFEADF 0%,#E1DACB 52%,#EBE5D9 100%); /* @kind color */
  --gradient-accent-soft:linear-gradient(160deg,#F7F3EA 0%,#EBE5D9 100%); /* @kind color */
  --gradient-mist:linear-gradient(180deg,#FBF9F4 0%,#EBE5D9 100%); /* @kind color */
  --gradient-orb:radial-gradient(circle at 34% 30%,#FFFFFF 0%,#FBEAE3 38%,#E2704B 76%,#C43F14 100%); /* @kind color */
  --gradient-protect:linear-gradient(180deg,rgba(243,239,230,0) 0%,#F3EFE6 82%); /* @kind color */

  /* --- Data-viz ink: one terracotta series, everything else stone --- */
  --viz-line-primary:var(--act-500);
  --viz-line-secondary:rgba(138,133,123,.55);
  --viz-fill-primary:rgba(217,72,28,.12);
  --viz-fill-secondary:rgba(42,48,56,.05);
  --viz-grid:rgba(138,133,123,.20);
  --viz-bar:var(--act-500);
  --viz-bar-quiet:var(--stone-500);
  --viz-track:rgba(138,133,123,.24);
  --viz-gauge-from:var(--stone-500);
  --viz-gauge-to:var(--act-500);

  /* Segment ramp — the wave of inactive blocks in SegmentedBar */
  --viz-step-1:var(--bone-200);
  --viz-step-2:var(--bone-300);
  --viz-step-3:var(--bone-400);
  --viz-step-4:var(--stone-200);
  --viz-step-5:var(--bone-300);
}

/* ---- typography.css ---- */
:root{
  --font-core:"Satoshi","Satoshi Variable",-apple-system,"Segoe UI",sans-serif;
  --font-display:var(--font-core);
  --font-numeric:var(--font-core);

  --fw-light:300; /* @kind font */
  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-bold:700; /* @kind font */

  /* Scale — lifted from the type board (48 / 24 / 14) and the screens */
  --fs-display:48px;
  --fs-h1:32px;
  --fs-h2:24px;
  --fs-h3:20px;
  --fs-h4:17px;
  --fs-body:14px;
  --fs-body-lg:16px;
  --fs-small:13px;
  --fs-caption:12px;
  --fs-micro:10px;

  --lh-display:1.06; /* @kind other */
  --lh-heading:1.18; /* @kind other */
  --lh-body:1.45; /* @kind other */
  --lh-tight:1.25; /* @kind other */

  --ls-display:-0.02em; /* @kind other */
  --ls-heading:-0.015em; /* @kind other */
  --ls-body:0em; /* @kind other */
  --ls-caps:0.08em; /* @kind other */

  /* Composite roles */
  --type-display:var(--fw-medium) var(--fs-display)/var(--lh-display) var(--font-display); /* @kind font */
  --type-h1:var(--fw-medium) var(--fs-h1)/var(--lh-heading) var(--font-display); /* @kind font */
  --type-h2:var(--fw-medium) var(--fs-h2)/var(--lh-heading) var(--font-display); /* @kind font */
  --type-h3:var(--fw-medium) var(--fs-h3)/var(--lh-tight) var(--font-core); /* @kind font */
  --type-h4:var(--fw-medium) var(--fs-h4)/var(--lh-tight) var(--font-core); /* @kind font */
  --type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-core); /* @kind font */
  --type-label:var(--fw-medium) var(--fs-small)/1.2 var(--font-core); /* @kind font */
  --type-caption:var(--fw-regular) var(--fs-caption)/1.35 var(--font-core); /* @kind font */
  --type-overline:var(--fw-medium) var(--fs-micro)/1.2 var(--font-core); /* @kind font */
}

/* ---- spacing.css ---- */
:root{
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:48px;
  --space-10:64px;

  /* Layout constants read off the desktop screens */
  --sidebar-w:248px;
  --sidebar-w-collapsed:76px;
  --topbar-h:64px;
  --mobile-tabbar-h:72px;
  --page-pad-x:32px;
  --page-pad-y:28px;
  --page-pad-x-mobile:16px;
  --card-pad:24px;
  --card-pad-tight:16px;
  --grid-gap:16px;
  --grid-gap-lg:20px;
  --tap-target:44px;
  --content-max:1440px;
}

/* ---- surfaces.css ---- */
:root,
[data-theme]{
  /* Corner radii — the system is pill-and-squircle; nothing is square */
  --radius-pill:999px;
  --radius-xs:8px;
  --radius-sm:12px;
  --radius-md:16px;
  --radius-lg:20px;
  --radius-xl:24px;
  --radius-2xl:28px;
  --radius-media:32px;

  /* Elevation is almost entirely surface-tint. Shadows are rare and very soft. */
  --shadow-none:none;
  --shadow-hairline:inset 0 0 0 1px var(--line-hairline);
  --shadow-raised:0 1px 2px rgba(42,48,56,.04);
  --shadow-float:0 18px 44px -18px rgba(42,48,56,.22);
  --shadow-panel:0 28px 70px -24px rgba(42,48,56,.28);
  --shadow-orb:0 0 44px rgba(217,72,28,.30);

  /* Glass — used only for panels that sit over a paper gradient or a photograph */
  --glass-bg:rgba(255,255,255,.55);
  --glass-bg-dark:rgba(42,48,56,.42);
  --glass-blur:blur(18px); /* @kind other */
  --glass-border:1px solid rgba(255,255,255,.45); /* @kind other */

  /* Focus */
  --focus-ring:0 0 0 2px var(--surface-page),0 0 0 4px var(--action-focus);
}

/* ---- motion.css ---- */
:root{
  --dur-instant:90ms; /* @kind other */
  --dur-fast:160ms; /* @kind other */
  --dur-base:220ms; /* @kind other */
  --dur-slow:340ms; /* @kind other */
  --dur-reveal:480ms; /* @kind other */

  /* Calm easing only. No overshoot, no bounce, anywhere in this system. */
  --ease-out:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-entrance:cubic-bezier(.2,.8,.2,1); /* @kind other */

  --transition-hover:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out); /* @kind other */
  --transition-surface:background-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out); /* @kind other */
  --transition-layout:transform var(--dur-base) var(--ease-entrance),opacity var(--dur-base) var(--ease-out); /* @kind other */

  --press-scale:.985; /* @kind other */
}

/* ---- theme-dark.css ---- */
/* Tema escuro. Não existia no dump (o manifest declarava themes: []); foi derivado no port
   só a partir das rampas de colors.css, sem hex novo além de --slate-950.
   Regra: a página vira Slate, o papel vira texto, e a Linha (terracotta) continua sendo só ação.
   Ativa com data-theme="dark" em qualquer elemento (o <html> inteiro ou um bloco do showcase).
   A escolha Sistema/Claro/Escuro é resolvida antes do primeiro desenho em app/layout.tsx. */
[data-theme="dark"]{
  color-scheme:dark;

  /* ink */
  --text-strong:var(--bone-100);
  --text-body:var(--stone-200);
  --text-muted:var(--stone-300);
  --text-faint:var(--stone-400);
  --text-on-dark:var(--slate-900);     /* "on dark" = sobre a superfície invertida, que aqui é clara */
  --text-on-accent:var(--bone-100);
  --text-link:var(--act-300);
  --text-link-hover:var(--act-200);

  /* surfaces: elevação continua sendo passo de tom, agora subindo para o claro */
  --surface-page:var(--slate-900);
  --surface-card:var(--slate-800);
  --surface-card-raised:var(--slate-700);
  --surface-sunken:var(--slate-950);
  --surface-inset:var(--slate-700);
  --surface-chip:var(--slate-700);
  --surface-chip-quiet:var(--slate-800);
  --surface-invert:var(--bone-100);
  --surface-accent:var(--slate-700);
  --surface-accent-strong:var(--slate-600);

  --surface-hover-light:var(--slate-600);
  --surface-hover-quiet:var(--slate-600);
  --surface-hover-bare:var(--slate-700);
  --surface-hover-invert:var(--bone-200);
  --surface-hover-accent:var(--slate-600);

  /* action: o preenchimento não muda (branco sobre act-600 = 5.2:1 nos dois temas) */
  --action-fill:var(--act-600);
  --action-fill-hover:var(--act-700);
  --action-fg:var(--white);
  --action-tint:rgba(217,72,28,.18);
  --action-tint-fg:var(--act-300);
  --action-border:rgba(226,112,75,.42);
  --action-focus:var(--act-300);
  --action-on-dark:var(--act-600);

  /* lines */
  --line-hairline:rgba(214,210,201,.14);
  --line-strong:rgba(214,210,201,.28);
  --line-on-dark:rgba(42,48,56,.16);

  /* status */
  --status-good-bg:var(--slate-700);
  --status-good-fg:var(--bone-100);
  --status-attention-bg:var(--bone-100);
  --status-attention-fg:var(--slate-800);
  --status-active-bg:rgba(217,72,28,.18);
  --status-active-fg:var(--act-300);
  --status-quiet-bg:var(--slate-800);
  --status-quiet-fg:var(--stone-300);

  /* gradients */
  --gradient-accent:linear-gradient(148deg,var(--slate-800) 0%,var(--slate-700) 52%,var(--slate-800) 100%);
  --gradient-accent-soft:linear-gradient(160deg,var(--slate-800) 0%,var(--slate-900) 100%);
  --gradient-mist:linear-gradient(180deg,var(--slate-800) 0%,var(--slate-900) 100%);
  --gradient-protect:linear-gradient(180deg,rgba(28,33,39,0) 0%,var(--slate-900) 82%);

  /* data-viz */
  --viz-line-secondary:rgba(214,210,201,.42);
  --viz-fill-primary:rgba(226,112,75,.16);
  --viz-fill-secondary:rgba(243,239,230,.06);
  --viz-grid:rgba(214,210,201,.12);
  --viz-bar:var(--act-300);
  --viz-bar-quiet:var(--stone-400);
  --viz-track:rgba(214,210,201,.16);
  --viz-gauge-from:var(--stone-400);
  --viz-gauge-to:var(--act-300);
  --viz-line-primary:var(--act-300);
  --viz-step-1:var(--slate-800);
  --viz-step-2:var(--slate-700);
  --viz-step-3:var(--slate-600);
  --viz-step-4:var(--slate-700);
  --viz-step-5:var(--slate-800);

  /* depth: sombra precisa de mais opacidade para existir sobre Slate */
  --shadow-raised:0 1px 2px rgba(0,0,0,.24);
  --shadow-float:0 18px 44px -18px rgba(0,0,0,.55);
  --shadow-panel:0 28px 70px -24px rgba(0,0,0,.6);
  --glass-bg:rgba(42,48,56,.55);
  --glass-bg-dark:rgba(21,25,30,.6);
  --glass-border:1px solid rgba(255,255,255,.08);
}

/* ---- base.css ---- */
/* Minimal global resets. Component styling lives with the components. */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--surface-page)}
body{margin:0;background:var(--surface-page);color:var(--text-strong);font:var(--type-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p{margin:0}
a{color:var(--text-link);text-decoration:none;transition:var(--transition-hover)}
a:hover{color:var(--text-link-hover)}
button{font:inherit;color:inherit}
::selection{background:var(--action-tint);color:var(--action-tint-fg)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@keyframes prumo-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}