/* ============================================================
   AKATÚ — Design System · Colors & Type
   Instituto Akatu pelo Consumo Consciente
   ------------------------------------------------------------
   Fonts are SELF-HOSTED from /fonts (brand .otf files). No CDN
   needed — just link this stylesheet. (@font-face URLs below are
   relative to THIS file at the project root.)
   Títulos: P22 Mackinac Pro   ·   Textos: Soleil
   ============================================================ */

/* ---- P22 Mackinac Pro (display / títulos) ---- */
@font-face { font-family:"p22-mackinac-pro"; src:url("fonts/P22MackinacProBook.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"p22-mackinac-pro"; src:url("fonts/P22MackinacProBook-Italic.otf") format("opentype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"p22-mackinac-pro"; src:url("fonts/PMackinacProMedium.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"p22-mackinac-pro"; src:url("fonts/P22MackinacPro-Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"p22-mackinac-pro"; src:url("fonts/P22MackinacPro-BoldItalic.otf") format("opentype"); font-weight:700; font-style:italic; font-display:swap; }

/* ---- Soleil (text / textos) ---- */
@font-face { font-family:"soleil"; src:url("fonts/SoleilLt.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"soleil"; src:url("fonts/SoleilBk.otf") format("opentype"); font-weight:350; font-style:normal; font-display:swap; }
@font-face { font-family:"soleil"; src:url("fonts/Soleil.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"soleil"; src:url("fonts/SoleilSb.otf") format("opentype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"soleil"; src:url("fonts/Soleil-Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; }

:root {
  /* ---- Brand core ------------------------------------------ */
  --akatu-verde:   #3F4C43; /* "Verde Akatú" — primary, the wordmark green */
  --akatu-areia:   #FFF4EA; /* "Areia"       — warm cream, default canvas   */

  /* ---- Earth / illustration palette (secondary) ------------ */
  --barro:  #A77550; /* clay / caramel — warm neutral, friendly  */
  --telha:  #AA5E3F; /* terracotta tile — energetic accent       */
  --tijolo: #A83F38; /* brick red — alerts, emphasis, hot accent */
  --ceu:    #7A859D; /* dusty sky blue — calm secondary accent   */
  --folha:  #2D352F; /* deep leaf green — darkest, ink on cream   */
  --trigo:  #D1B692; /* wheat / sand — soft surface, dividers     */

  /* ---- Tints & shades (derived, oklch-harmonised) ---------- */
  --verde-700: #313C35;
  --verde-600: #3F4C43;
  --verde-500: #4F5E53;
  --verde-300: #8A968C;
  --verde-100: #DCE2DC;
  --verde-050: #EEF1ED;

  --areia-deep:  #F6E7D6; /* slightly deeper cream for layering   */
  --areia-edge:  #EADAC6; /* hairline / border on cream           */

  --telha-600: #93502F;
  --telha-tint:#F3D9CC;
  --ceu-tint:  #E2E5EC;
  --trigo-tint:#EEE2CE;

  /* ---- Semantic surfaces ----------------------------------- */
  --bg:            var(--akatu-areia);
  --bg-elevated:   #FFFFFF;
  --bg-sunken:     var(--areia-deep);
  --bg-inverse:    var(--akatu-verde);

  --surface-card:  #FFFFFF;
  --surface-soft:  var(--trigo-tint);

  /* ---- Semantic text --------------------------------------- */
  --fg1:  #2A332C; /* primary ink — near-black green            */
  --fg2:  #56615A; /* secondary text / captions                 */
  --fg3:  #8A938C; /* muted / placeholder / metadata            */
  --fg-on-verde:   #FFF4EA; /* text on the dark green            */
  --fg-on-telha:   #FFF4EA;

  /* ---- Lines & borders ------------------------------------- */
  --border:        #E7DAC8;
  --border-strong: #D7C6AE;
  --border-verde:  rgba(63,76,67,0.18);

  /* ---- Status (kept earthy, on-brand) ---------------------- */
  --success: #4F7A4E;
  --warning: #C98A33;
  --danger:  var(--tijolo);
  --info:    var(--ceu);

  /* ---- Focus ring ------------------------------------------ */
  --focus: #7A859D;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  /* P22 Mackinac Pro ships weights 400 + 700 (roman & italic).
     Soleil ships weights 400 + 700 (roman & italic).
     Use 400/700 for display; 500/600 below fall back to nearest. */
  --font-display: "p22-mackinac-pro", "P22 Mackinac Pro", Georgia, "Times New Roman", serif;
  --font-text:    "soleil", "Soleil", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Type scale (1.250 major-third on a 16px base) */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.375rem;  /* 22px */
  --text-xl:   1.75rem;   /* 28px */
  --text-2xl:  2.25rem;   /* 36px */
  --text-3xl:  3rem;      /* 48px */
  --text-4xl:  4rem;      /* 64px */
  --text-5xl:  5.25rem;   /* 84px */

  --leading-tight: 1.08;
  --leading-snug:  1.22;
  --leading-body:  1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.12em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* ============================================================
     SPACING — 4px base, soft organic rhythm
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10:128px;

  /* ---- Radii — generous, pebble-soft ----------------------- */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  36px;
  --radius-pill:999px;
  --radius-blob:42% 58% 56% 44% / 50% 44% 56% 50%; /* organic seed */

  /* ---- Elevation — warm, low-contrast soft shadows --------- */
  --shadow-xs: 0 1px 2px rgba(63,76,67,0.06);
  --shadow-sm: 0 2px 8px rgba(63,76,67,0.08);
  --shadow-md: 0 8px 24px rgba(63,76,67,0.10);
  --shadow-lg: 0 18px 48px rgba(63,76,67,0.14);

  /* ---- Motion ---------------------------------------------- */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — opt-in via .akatu-prose / utilities
   ============================================================ */
.akatu-type, .akatu-prose {
  font-family: var(--font-text);
  color: var(--fg1);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--akatu-verde);
  text-wrap: balance;
}
.h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--akatu-verde); text-wrap: balance; }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--akatu-verde); text-wrap: balance; }
.h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); line-height: var(--leading-snug); color: var(--akatu-verde); }
.h4 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--akatu-verde); }
.title-sm { font-family: var(--font-text); font-weight: 600; font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--fg1); }

.lead { font-family: var(--font-text); font-weight: 400; font-size: var(--text-md); line-height: var(--leading-body); color: var(--fg2); }
.body { font-family: var(--font-text); font-weight: 400; font-size: var(--text-base); line-height: var(--leading-body); color: var(--fg1); }
.small { font-size: var(--text-sm); line-height: 1.5; color: var(--fg2); }
.caption { font-size: var(--text-xs); line-height: 1.4; color: var(--fg3); }

/* Eyebrow / kicker — uppercase Soleil with wide tracking */
.eyebrow {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--telha);
}

a.akatu-link { color: var(--telha); text-decoration: none; border-bottom: 1.5px solid var(--telha-tint); transition: border-color var(--dur-fast) var(--ease-soft); }
a.akatu-link:hover { border-bottom-color: var(--telha); }