/* ============================================================
   CecropAI — Design Foundations
   Colors + Typography tokens
   Direction: A NEW GOLDEN AGE — warm Paper canvas + Cecropia Green
   anchor, editorial serif (Newsreader) × grotesque (Hanken), and
   public-domain veduta art — architectural cityscapes. (Cool grey/slate retained for data.)
   ============================================================ */

/* Editorial serif — CDN (not user-supplied; fine to load remotely).
   For PowerPoint, install Newsreader from fonts.google.com/specimen/Newsreader. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&display=swap');


/* ---- Fonts ----------------------------------------------------
   BRAND FONT: Hanken Grotesk — SELF-HOSTED from fonts/ (user-supplied
   static weights, Thin→Black with italics). Neutral grotesque chosen
   as the stand-in for Helvetica Neue.
   • Web/HTML: served locally below — no CDN, works offline.
   • PowerPoint: install the TTFs from fonts/ (or fonts.google.com/specimen/Hanken+Grotesk),
     then enable Save ▸ Embed fonts so recipients see it.
   Helvetica Neue / Arial remain in the stack as graceful fallbacks.
---------------------------------------------------------------- */

@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-Thin.ttf") format("truetype");        font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-ThinItalic.ttf") format("truetype");  font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-ExtraLight.ttf") format("truetype");       font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-ExtraLightItalic.ttf") format("truetype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-Light.ttf") format("truetype");       font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-Regular.ttf") format("truetype");     font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-Italic.ttf") format("truetype");      font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-Medium.ttf") format("truetype");       font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-SemiBold.ttf") format("truetype");       font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-Bold.ttf") format("truetype");       font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-ExtraBold.ttf") format("truetype");       font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-ExtraBoldItalic.ttf") format("truetype"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-Black.ttf") format("truetype");       font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-BlackItalic.ttf") format("truetype"); font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* ---------- Type families ---------- */
  --font-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Display = the SAME family at light weight (300), matching the
     deck's large, airy titles. */
  --font-display: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif; /* editorial voice */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Weights ---------- */
  --fw-light: 300;   /* @kind font */ /* big titles, quiet numbers */
  --fw-regular: 400; /* @kind font */ /* body */
  --fw-medium: 500;  /* @kind font */ /* labels, UI */
  --fw-semibold: 600;/* @kind font */
  --fw-bold: 700;    /* @kind font */ /* emphasis, key figures */

  /* ============================================================
     COLOR — NEUTRALS (the "grey" half of the system)
     A cool, professional grey ramp. Most surfaces live here.
     ============================================================ */
  --white:    #FFFFFF;
  --grey-50:  #F8F7F6; /* "Off-White" — page background (from deck) */
  --grey-100: #F1F2F3; /* card / panel fill (from deck) */
  --grey-200: #E2E5E8; /* hairline fills, dividers */
  --grey-300: #BFBFBF; /* borders, disabled (from deck) */
  --grey-400: #9C9C9C; /* "Site Grey" — muted text, captions (from deck) */
  --grey-500: #6E767E; /* secondary text */
  --grey-600: #4A5159; /* body on light */
  --grey-700: #343C45;
  --grey-800: #232A31;
  --grey-900: #192434; /* "Slate Ink" — dark surfaces & headlines (from deck) */
  --grey-950: #11151B; /* deepest background */

  /* ============================================================
     COLOR — BRAND GREEN (the "dark green" half — the hero)
     Sampled from the tree logo (#008050) and extended.
     Brand name: "Cecropia Green".
     ============================================================ */
  --green-50:  #F0F7F3; /* faintest tint — section wash */
  --green-100: #DCEEE4; /* chip / badge fill */
  --green-200: #B6DBC8;
  --green-300: #7CC0A0;
  --green-500: #0E9A63; /* lively green — interactive hover */
  --green-600: #008050; /* PRIMARY — the logo green */
  --green-700: #00603C; /* "dark green" — buttons, emphasis */
  --green-800: #004D31;
  --green-900: #003322; /* deepest green — dark hero panels */

  /* ============================================================
     COLOR — WARM PAPER  (the editorial canvas — "A New Golden Age")
     The primary surface for narrative/openers/dividers. Cool grey
     (above) is retained for data-dense and dark slides.
     ============================================================ */
  --paper:       #F4EEE2; /* primary warm canvas */
  --paper-deep:  #EAE1D1; /* sunken panel / alt band */
  --paper-card:  #FBF7EF; /* card fill on paper */
  --ink:         #20231F; /* warm near-black — text & dark panels */
  --ink-soft:    #54584F; /* secondary text on paper */
  --ink-mute:    #837C6E; /* captions / meta on paper */
  --stone:       #C9BFAD; /* warm hairline / divider on paper */
  --stone-soft:  #DED5C4; /* faint warm hairline */
  --green-deep:  #00533A; /* green text/ink on warm paper (AA-safe) */

  /* ============================================================
     SEMANTIC / FUNCTIONAL
     Pulled from the deck's risk + status treatments.
     ============================================================ */
  --success:        #008050;
  --success-fill:   #DCEEE4;
  --danger:         #B23A2E; /* "Crítico" severity */
  --danger-fill:    #F4CCCC; /* deck's critical-row fill */
  --warning:        #E08A1E; /* "Alto" severity */
  --warning-fill:   #FBE7C9;
  --info:           #194A5D; /* deep teal — neutral callouts */
  --info-fill:      #E4EDF0;

  /* ============================================================
     SUPPLEMENTARY ACCENTS  (governed — for data viz, illustration,
     and the occasional highlight ONLY).
     RULE: accents never out-shout Cecropia Green. Green is always
     the brand signal / series-1; accents are support. Use one
     accent per composition. Never use an accent as a CTA color.

     PRIMARY ACCENT = OCHRE (muted gold). It is the single "remark"
     color — the one bar, figure, or word that matters. Ochre reads
     warm and Golden-Age-appropriate while sitting clearly OFF the
     terracotta/coral register that brand-collides with other warm-
     neutral AI identities. Use the --remark semantic role below.

     Clay is DEMOTED to illustration-only (earthy texture in art-
     adjacent compositions). Do NOT use clay to remark data or as the
     accent on paper slides — reach for ochre.
     ============================================================ */
  --accent-ochre:   #C2922F; /* PRIMARY accent — muted gold, the remark color */
  --accent-ochre-fill:  #F5EAD2;
  --accent-clay:    #C2663D; /* ARCHIVED — retained only for the archived Differentiation Canvas (clay→ochre rationale). NOT a live brand/data/accent color. */
  --accent-clay-fill:   #F4E3DA;
  --accent-teal:    #194A5D; /* deep teal (= --info) — cool support */
  --accent-slateblue: #4D6280; /* muted blue-grey — quiet 4th series */

  /* ============================================================
     CHART COLORS  (consulting style)
     DEFAULT = monochrome tones of ONE color (green). Use a single
     accent ONLY to remark the data point that matters.
     This reads cleaner than a rainbow of categorical colors.
     ============================================================ */
  --chart-1: #003322; /* green-900 — darkest tone */
  --chart-2: #004D31; /* green-800 */
  --chart-3: #00603C; /* green-700 */
  --chart-4: #0E7A4D; /* mid */
  --chart-5: #2F9E72; /* lighter */
  --chart-6: #7CC0A0; /* green-300 — lightest tone */
  --chart-muted: #CBD5D0;       /* desaturated green-grey for "other" bars */
  --chart-highlight: var(--accent-ochre);  /* the remark accent (ochre) — use sparingly, once per chart */
  --chart-grid: var(--grey-200);

  /* Legacy categorical series (kept for illustration use, NOT charts) */
  --series-1: var(--green-600);
  --series-2: var(--accent-teal);
  --series-3: var(--accent-ochre);
  --series-4: var(--accent-slateblue);
  --series-5: var(--green-300);
  --series-6: var(--grey-400);

  /* ============================================================
     SEMANTIC ROLES — reference these in components, not raw scale
     ============================================================ */
  --bg-page:        var(--grey-50);
  --bg-surface:     var(--white);
  --bg-sunken:      var(--grey-100);
  --bg-inverse:     var(--grey-900);   /* slate ink panels */
  --bg-brand:       var(--green-700);  /* dark-green hero panels */

  --fg-primary:     var(--grey-900);   /* headlines, body */
  --fg-secondary:   var(--grey-600);   /* supporting copy */
  --fg-muted:       var(--grey-400);   /* captions, meta */
  --fg-on-dark:     var(--white);
  --fg-on-brand:    var(--white);
  --fg-brand:       var(--green-700);  /* green text / links */

  --border-subtle:  var(--grey-200);
  --border-default: var(--grey-300);
  --border-strong:  var(--grey-900);

  --accent:         var(--green-600);
  --accent-strong:  var(--green-700);
  --accent-hover:   var(--green-500);

  /* REMARK — the lone non-green highlight: the one figure/bar/word
     that matters on a slide. Always ochre. Used at most once per view.
     (Slide components reference --remark, never a raw accent.) */
  --remark:         var(--accent-ochre);
  --remark-fill:    var(--accent-ochre-fill);

  /* ============================================================
     RADII — restrained. Construction-grade, not playful.
     ============================================================ */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS — soft, low, cool grey. Used sparingly.
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(25, 36, 52, 0.06);
  --shadow-sm: 0 1px 3px rgba(25, 36, 52, 0.08), 0 1px 2px rgba(25, 36, 52, 0.06);
  --shadow-md: 0 4px 12px rgba(25, 36, 52, 0.10);
  --shadow-lg: 0 12px 32px rgba(25, 36, 52, 0.14);

  /* ============================================================
     SPACING — 4px base grid
     ============================================================ */
  --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;

  /* ============================================================
     TYPE SCALE  (semantic) — tuned for slides & docs.
     line-height + tracking baked in.
     ============================================================ */
  --text-display: var(--fw-medium) 60px/1.05 var(--font-display);   /* solid covers */
  --text-h1:      var(--fw-semibold) 42px/1.10 var(--font-sans);
  --text-h2:      var(--fw-semibold) 30px/1.18 var(--font-sans);
  --text-h3:      var(--fw-semibold) 22px/1.25 var(--font-sans);
  --text-h4:      var(--fw-semibold) 17px/1.30 var(--font-sans);
  --text-lead:    var(--fw-regular) 20px/1.5 var(--font-sans);  /* deck/intro lead paragraph */
  --text-body:    var(--fw-regular) 16px/1.55 var(--font-sans);
  --text-small:   var(--fw-regular) 14px/1.5 var(--font-sans);
  --text-caption: var(--fw-medium) 12px/1.4 var(--font-sans);
  --text-figure:  var(--fw-bold) 48px/1.0 var(--font-sans); /* big data figure — solid */
  --text-mono:    var(--fw-regular) 14px/1.5 var(--font-mono);

  /* Editorial SERIF (Newsreader) — voice: covers, section openers, quotes */
  --text-serif-display: var(--fw-medium) 64px/1.04 var(--font-serif);
  --text-serif-h1:      var(--fw-medium) 46px/1.08 var(--font-serif);
  --text-serif-h2:      var(--fw-medium) 34px/1.12 var(--font-serif);
  --text-serif-quote:   var(--fw-regular) 36px/1.3 var(--font-serif);

  /* Eyebrow / kicker — uppercase tracked label (used over titles) */
  --tracking-eyebrow: 0.14em;
  --tracking-tight: -0.01em;
}

/* ============================================================
   OPTIONAL SEMANTIC ELEMENT DEFAULTS
   Apply by adding class names; non-invasive (no bare-tag resets).
   ============================================================ */
.cec-display { font: var(--text-display); letter-spacing: var(--tracking-tight); color: var(--fg-primary); }
.cec-h1 { font: var(--text-h1); letter-spacing: var(--tracking-tight); color: var(--fg-primary); }
.cec-h2 { font: var(--text-h2); color: var(--fg-primary); }
.cec-h3 { font: var(--text-h3); color: var(--fg-primary); }
.cec-h4 { font: var(--text-h4); color: var(--fg-primary); }
.cec-lead { font: var(--text-lead); color: var(--fg-secondary); }
.cec-body { font: var(--text-body); color: var(--fg-secondary); }
.cec-small { font: var(--text-small); color: var(--fg-secondary); }
.cec-caption { font: var(--text-caption); color: var(--fg-muted); }
.cec-figure { font: var(--text-figure); letter-spacing: var(--tracking-tight); color: var(--fg-primary); font-variant-numeric: tabular-nums; }
.cec-mono { font: var(--text-mono); }

/* Editorial serif helpers (the "voice") */
.cec-serif-display { font: var(--text-serif-display); letter-spacing: var(--tracking-tight); color: var(--fg-primary); }
.cec-serif-h1 { font: var(--text-serif-h1); letter-spacing: var(--tracking-tight); color: var(--fg-primary); }
.cec-serif-h2 { font: var(--text-serif-h2); color: var(--fg-primary); }
.cec-serif-quote { font: var(--text-serif-quote); color: var(--fg-primary); }
.cec-serif-italic { font-family: var(--font-serif); font-style: italic; }

/* Link — green, underline appears on hover */
.cec-link { color: var(--fg-brand); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s ease; }
.cec-link:hover { border-bottom-color: currentColor; }

.cec-eyebrow {
  font: var(--fw-bold) 12px/1.2 var(--font-sans);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-brand);
}