/* =========================================================
   CUTUKA — Colors & Type Foundation
   Studio de management & art planning

   Sistema organizado por FUNÇÃO, não por matiz.
   Componentes referenciam roles (--role-*); roles apontam
   para matizes nomeados (--c-*). Trocar uma matiz é uma
   edição num único lugar.
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Minion Variable";
  src: url("fonts/MinionVariableConcept-Roman.otf") format("opentype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Minion Variable";
  src: url("fonts/MinionVariableConcept-Italic.otf") format("opentype");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

/* Grotesk display — Banana Grotesk reference, substituída por
   Space Grotesk + Inter via Google Fonts (ver README). */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap");

:root {

  /* =========================================================
     1. MATIZES NOMEADOS (camada inferior — não use em componentes)
     Estes são os hexes-fonte. Componentes não devem referenciá-los
     diretamente; sempre passe pela camada de roles ou semantic
     tokens abaixo. Isto é a paleta crua, não o sistema.
     ========================================================= */

  /* — Marca — */
  --c-purple:       #6B2EE6;   /* roxo elétrico — primário, fixo */
  --c-purple-deep:  #4A1FB0;   /* press/hover, hierarquia interna */
  --c-lavender:     #C7B8F0;   /* lavanda — companheira do roxo */
  --c-lilac-tint:   #ECE3FB;   /* tint mais leve, paper-grade */

  /* — Acentos (uso pontual, raro, single-element) — */
  --c-orange:       #EA4C27;   /* knallorange — ação, CTA */
  --c-lime:         #D8E84C;   /* lime elétrico — sinal, marcador */

  /* — Profundidade — dois deeps com funções distintas.
     Vinho-quase-preto = densidade NEUTRA (preto quente do sistema).
     Bottle           = densidade COM POSIÇÃO (verde institucional editorial,
                        comunicado oficial que assume um hue). */
  --c-wine:         #2D0C13;   /* vinho-quase-preto — preto quente neutro */
  --c-bottle:       #163A30;   /* verde institucional editorial — comunicado com voz */

  /* — Neutros — paper quente como página; stone frio como bloco institucional.
     Beige foi removido do sistema (turno anterior decidiu eliminar marrons).
     A rampa é deliberadamente curta: paper / paper-warm (quentes, editoriais)
     + stone (frio, institucional) + ink (tipo). */
  --c-paper:        #F4ECE2;   /* fundo padrão da página, off-white quente */
  --c-paper-warm:   #EAE0D2;   /* superfície secundária quente — seção, footer */
  --c-stone:        #9C9A95;   /* cinza-pedra warm-neutral — único bloco institucional, frio, registrational */
  --c-ink:          #1F1A18;   /* tipo, regras, ícones — nunca bloco grande */

  /* =========================================================
     2. ROLES SEMÂNTICOS (camada de função — use em componentes)
     Quando um componente precisa de cor, ele alcança um role,
     não uma matiz. Trocar a marca em 2027 = editar uma linha.
     ========================================================= */

  --role-primary:     var(--c-purple);       /* a marca, o selo, o bloco assinatura */
  --role-primary-deep:var(--c-purple-deep);  /* press/hover do primário */
  --role-companion:   var(--c-lavender);     /* respiro do primário, type accent */
  --role-companion-soft: var(--c-lilac-tint);/* lavagem mais leve */

  --role-action:      var(--c-orange);       /* CTA, aplicar, decisão — UM por peça */
  --role-signal:      var(--c-lime);         /* dot, eyebrow word — UM por composição */

  --role-deep:               var(--c-wine);    /* densidade neutra — "preto quente" do sistema */
  --role-deep-institutional: var(--c-bottle);  /* densidade com posição — comunicado oficial editorial */

  /* =========================================================
     3. SUPERFÍCIES E TEXTO (semantic tokens — use em componentes)
     ========================================================= */

  /* — Superfícies, organizadas por densidade de presença do estúdio — */
  --surface-page:               var(--c-paper);                /* default. quase nada do estúdio. o artista fala. */
  --surface-section:            var(--c-paper-warm);           /* diferenciação interna sem virar bloco colorido */
  --surface-institutional:      var(--c-stone);                /* MODO INSTITUCIONAL — aviso, proposta, contrato, papel timbrado. frio, registrational. */
  --surface-brand:              var(--role-primary);           /* selo institucional, capa, IG square assinatura */
  --surface-companion:          var(--role-companion);         /* bloco suave companheiro do roxo */
  --surface-deep:               var(--role-deep);              /* densidade neutra — capa, série, fundo denso sem posição */
  --surface-deep-institutional: var(--role-deep-institutional);/* comunicado oficial editorial — verde com voz */

  /* — Aliases curtos pra compatibilidade com código existente — */
  --bg:        var(--surface-page);
  --bg-soft:   var(--surface-section);   /* alias deprecated; preferir --surface-section */
  --surface:   var(--surface-brand);     /* alias deprecated; preferir --surface-brand */
  --surface-2: var(--surface-page);
  --surface-3: var(--surface-companion);

  /* — Tipo — */
  --fg:           var(--c-ink);              /* tipo padrão sobre paper / paper-warm / stone / lavender */
  --fg-muted:     #6B5F54;                   /* metadata, datas, autoria, eyebrow secundário */
  --fg-dim:       #9A8E82;                   /* placeholder, breadcrumb inativo */
  --ink-on-light: var(--c-ink);              /* tipo sobre paper / paper-warm / stone / lavender */
  --ink-on-dark:  var(--c-paper);            /* tipo sobre roxo / wine / bottle */

  /* — Aliases pra accents/signal preservando hábito de uso — */
  --accent:  var(--role-action);
  --signal:  var(--role-signal);

  /* — Regras finas — */
  --rule:       rgba(244, 236, 226, 0.16);   /* divisor sobre superfícies escuras */
  --rule-dark:  rgba(31, 26, 24, 0.14);      /* divisor sobre paper / paper-warm / stone */
  --rule-hair:  rgba(31, 26, 24, 0.08);      /* hairline mais discreta — letterhead, ficha */

  /* =========================================================
     4. ALIASES LEGADOS
     Tokens antigos resolvem pros novos roles. Cards de preview
     antigos continuam renderizando coerentemente sem reescrita.
     Nada novo deve ser escrito contra estes nomes.
     ========================================================= */
  --c-lilac:        var(--c-purple);
  --c-lilac-deep:   var(--c-purple-deep);
  /* --c-bottle reaberto como cor própria (acima); alias removido */
  --c-tomato:       var(--c-orange);
  --c-pink:         var(--c-lavender);
  --c-chocolate:    var(--c-wine);
  --c-beige:        var(--c-stone);    /* beige eliminado do sistema; alias resolve para stone */
  --c-olive:        var(--c-bottle);
  --c-clay:         var(--c-orange);
  --c-chestnut:     var(--c-wine);
  --c-bone:         var(--c-stone);
  --c-lime-wash:    var(--c-lime);
  --lavender-50:    var(--c-lilac-tint);
  --lavender-100:   var(--c-lilac-tint);
  --lavender-300:   var(--c-lavender);
  --lavender-400:   var(--c-purple);
  --lavender-500:   var(--c-purple);
  --lavender-700:   var(--c-purple-deep);
  --lavender-900:   var(--c-ink);
  --truffle:        var(--c-wine);
  --truffle-deep:   var(--c-wine);
  --sand:           var(--c-stone);
  --sand-soft:      var(--c-paper-warm);
  --snowdrift:      var(--c-paper);
  --paper:          var(--c-paper);
  --ink:            var(--c-ink);
  --spring-bud:     var(--c-lime);
  --ember:          var(--c-orange);
  --bottle:         var(--c-bottle);
  --wine:           var(--c-wine);
  --olive:          var(--c-bottle);
  --forest:         var(--c-bottle);
  --terracotta:     var(--c-orange);
  --royal:          var(--c-purple);
  --lime-wash:      var(--c-lime);

  /* =========================================================
     5. TIPOGRAFIA
     Duas serifs, dois papéis distintos:
       Minion Variable     = voz quente / autoral / curatorial
                             (manifesto, "sobre", lede, citação)
       Cormorant Garamond  = voz fria / institucional / impressa
                             (ficha técnica, créditos, papel timbrado)
     Misturar os dois numa peça é incoerência.
     ========================================================= */
  --font-display:       "Space Grotesk", "Banana Grotesk", "Inter", system-ui, sans-serif;
  --font-curatorial:    "Minion Variable", Georgia, serif;            /* voz quente — itálico do estúdio */
  --font-institutional: "Cormorant Garamond", Georgia, serif;         /* voz fria — papel impresso */
  --font-body:          "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:          ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* — Aliases legados (ainda em uso em preview/templates) — */
  --font-serif:         var(--font-curatorial);
  --font-serif-light:   var(--font-institutional);

  /* =========================================================
     6. ESCALA TIPOGRÁFICA
     ========================================================= */
  --fs-display:   clamp(56px, 9vw, 132px);
  --fs-h1:        clamp(40px, 5vw, 72px);
  --fs-h2:        clamp(32px, 3.6vw, 52px);
  --fs-h3:        24px;
  --fs-h4:        18px;
  --fs-body:      16px;
  --fs-small:     13px;
  --fs-eyebrow:   11px;

  --lh-tight:  0.92;
  --lh-snug:   1.05;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  --ls-tight:    -0.04em;
  --ls-display:  -0.035em;
  --ls-eyebrow:  0.14em;

  /* =========================================================
     7. ESPAÇAMENTO (escala modular)
     ========================================================= */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* =========================================================
     8. RAIOS (escala declarada — sem valores fora dela)
     ========================================================= */
  --r-xs: 2px;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-pill: 999px;
  --r-blob: 64% 36% 52% 48% / 60% 56% 44% 40%;

  /* =========================================================
     9. ELEVAÇÃO
     ========================================================= */
  --shadow-1: 0 1px 0 rgba(31, 26, 24, 0.08);
  --shadow-2: 0 8px 24px rgba(31, 26, 24, 0.18);
  --shadow-3: 0 24px 60px rgba(31, 26, 24, 0.28);
  --shadow-inset-light: inset 0 0 0 1px rgba(31, 26, 24, 0.08);

  /* =========================================================
     10. MOTION
     ========================================================= */
  --ease-editorial: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-soft:      cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:       160ms;
  --dur-base:       260ms;
  --dur-slow:       520ms;
}

/* =========================================================
   PAPÉIS TIPOGRÁFICOS
   ========================================================= */

.cu-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: lowercase;
}

.cu-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-transform: lowercase;
}

.cu-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-transform: lowercase;
}

.cu-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Voz curatorial — Minion italic.
   Manifesto, lede, citação, "sobre", primeira pessoa do estúdio. */
.cu-curatorial {
  font-family: var(--font-curatorial);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* Voz institucional — Cormorant Light.
   Ficha técnica, créditos, papel timbrado, colofon. */
.cu-institutional {
  font-family: var(--font-institutional);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.45;
  text-wrap: pretty;
}

/* Alias legado — preview cards antigos */
.cu-serif-display {
  font-family: var(--font-curatorial);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.cu-eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.cu-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  text-wrap: pretty;
}

/* Lede — alias mantido. Resolve para curatorial (Minion) por padrão.
   Para lede institucional frio, use .cu-institutional explicitamente. */
.cu-lede {
  font-family: var(--font-curatorial);
  font-weight: 400;
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  text-wrap: pretty;
}

.cu-small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.cu-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
}