/* =============================================================================
   MI HABANA ES ASÍ — DESIGN TOKENS  (single source of truth for the look)
   Idea, Design & Build by The Architect
   -----------------------------------------------------------------------------
   These CSS custom properties are the ONLY place brand values are defined.
   Components in site.css reference tokens, never raw hex. Light is default;
   [data-theme="dark"] overrides the semantic tokens. Variable names are kept
   stable so pages can adopt the system without renaming anything.
   ============================================================================= */

:root{
  /* ---- brand primitives ---- */
  --ocean:#0c3b3c;        /* deep teal — headings, primary surfaces */
  --ocean2:#0a2e2f;       /* darker teal — footers, deep panels */
  --ocean3:#08272a;
  --cream:#f7f2e8;        /* warm ivory — secondary surface */
  --paper:#fbf8f1;        /* page background */
  --surface:#ffffff;      /* card background (light) */
  --ink:#211d18;          /* body text */
  --muted:#6c6356;        /* secondary text */
  --line:#e6dcc9;         /* hairlines / borders */
  --gold:#bf9436;         /* primary accent */
  --gold-bright:#e9b96a;  /* hover / glow accent */
  --terra:#bd5d39;        /* warm accent — eyebrows */
  --teal:#0e7c7b;

  /* ---- opportunity cluster palette (used by dashboard, directory, radar) ---- */
  --cl-exp:#b8860b; --cl-xp:#bd5d39; --cl-agri:#2f8f5b;
  --cl-dig:#0F6CBD; --cl-mon:#6b4e9e; --cl-blt:#0e7c7b; --cl-cul:#c9598f;
  --ok:#2f8f5b; --warn:#9a7414; --bad:#bd5d39;

  /* ---- typography ---- */
  --font-serif:'Fraunces',Georgia,serif;
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:var(--font-serif); --sans:var(--font-sans);
  --fs-eyebrow:12px; --fs-sm:13.5px; --fs-body:16.5px; --fs-lead:19px;
  --lh-body:1.65; --tracking-eyebrow:.22em;

  /* ---- spacing scale (4px base) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px;

  /* ---- radii ---- */
  --r-sm:8px; --r-md:11px; --r-lg:16px; --r-xl:20px; --r-2xl:24px; --r-pill:30px;

  /* ---- elevation ---- */
  --shadow-1:0 14px 30px -18px rgba(20,40,40,.22);
  --shadow-2:0 22px 44px -26px rgba(20,40,40,.38);
  --shadow-3:0 32px 60px -28px rgba(20,40,40,.5);

  /* ---- motion ---- */
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.4,0,.2,1);
  --dur-1:.18s; --dur-2:.3s; --dur-3:.6s;

  /* ---- glass ---- */
  --glass-bg:rgba(255,255,255,.5); --glass-border:rgba(255,255,255,.55);
  --glass-blur:16px;

  /* ---- layout & z-index ---- */
  --container:1120px; --container-narrow:820px; --nav-h:64px;
  --z-nav:10; --z-progress:60; --z-scrim:90; --z-drawer:91;
}

[data-theme="dark"]{
  --paper:#0f1d1a;
  --surface:#16231f;
  --cream:#16231f;
  --ink:#ece4d6;
  --muted:#a3b5ae;
  --line:rgba(233,185,106,.16);
  --ocean:#d7e8e1;        /* headings become light on dark */
  --terra:#e0875f;
  --gold:#e9b96a;
  --glass-bg:rgba(255,255,255,.06);
  --glass-border:rgba(255,255,255,.14);
  --shadow-1:0 18px 40px -22px rgba(0,0,0,.6);
  --shadow-2:0 24px 50px -28px rgba(0,0,0,.66);
  --shadow-3:0 30px 60px -28px rgba(0,0,0,.72);
}