/* ============================================================
   NAVI STUDIO — BRAND STYLESHEET (drop-in)
   Colors, fonts and type tokens. Include this file once, then
   use the CSS variables anywhere. No em-dashes in copy.
   Colors: Deep Teal #103A44 · Coral #FF6A4D · Cream #FAF7F2
   Fonts:  Montserrat (display) + Inter (body)
   ============================================================ */

/* --- Fonts (Google Fonts CDN) --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  /* ---- Base palette ---- */
  --teal-900:#0D323B;
  --teal-800:#103A44;   /* Deep Teal — primary */
  --teal-700:#154A56;
  --teal-100:#CFE6EA;   /* light teal tint (accents on dark) */
  --teal-200:#8FB3BB;   /* muted teal */
  --coral-500:#FF6A4D;  /* Coral — one accent per layout */
  --coral-600:#E85736;  /* coral hover */
  --amber-500:#F4A93B;  /* Amber — rare highlight */
  --ink-900:#14181A;    /* Ink — text */
  --cream-50:#FAF7F2;   /* Cream — backgrounds */
  --muted-500:#6B7472;  /* muted text */
  --body-700:#33403F;   /* long-form body text */
  --line-200:#E4DED3;   /* hairlines, card borders */
  --white:#FFFFFF;

  /* ---- Semantic aliases (use these in components) ---- */
  --brand-primary:var(--teal-800);
  --brand-accent:var(--coral-500);
  --brand-highlight:var(--amber-500);
  --bg-page:var(--cream-50);
  --bg-card:var(--white);
  --bg-inverse:var(--teal-800);
  --gradient-hero:linear-gradient(135deg,#0D323B,#154A56);
  --text-heading:var(--teal-800);
  --text-body:var(--ink-900);
  --text-long:var(--body-700);
  --text-muted:var(--muted-500);
  --text-on-dark:#FFFFFF;
  --text-on-dark-soft:var(--teal-100);
  --text-on-dark-muted:var(--teal-200);
  --border-default:var(--line-200);
  --surface-card:var(--white);

  /* ---- Status ---- */
  --status-success:#2E7D5B;
  --status-warning:var(--amber-500);
  --status-danger:var(--coral-600);

  /* ---- Typography ---- */
  --font-display:'Montserrat',sans-serif; /* headlines, wordmark, buttons — 600-800 */
  --font-body:'Inter',sans-serif;         /* body, captions, UI — 400-600 */

  --text-hero:clamp(40px,5vw,64px);
  --text-h1:44px;
  --text-h2:32px;
  --text-h3:22px;
  --text-body-lg:17px;
  --text-body-md:15px;
  --text-body-sm:13px;
  --text-caption:12px;
  --text-overline:13px;      /* uppercase, letter-spacing .18em, Montserrat 700 */

  --leading-tight:1.1;
  --leading-body:1.55;
  --tracking-overline:.18em;
  --tracking-endorse:.22em;
  --tracking-heading:-.01em;
}

/* --- Minimal helper classes (optional) --- */
.brand-bg{background:var(--bg-page);color:var(--text-body);}
.brand-heading{font-family:var(--font-display);font-weight:800;color:var(--text-heading);letter-spacing:var(--tracking-heading);line-height:var(--leading-tight);}
.brand-body{font-family:var(--font-body);font-weight:400;color:var(--text-long);line-height:var(--leading-body);}
.brand-overline{font-family:var(--font-display);font-weight:700;font-size:var(--text-overline);text-transform:uppercase;letter-spacing:var(--tracking-overline);color:var(--brand-accent);}
.brand-accent{color:var(--brand-accent);}
.brand-btn{font-family:var(--font-display);font-weight:700;background:var(--brand-accent);color:#fff;border:none;border-radius:10px;padding:12px 22px;cursor:pointer;}
.brand-btn--ghost{background:transparent;color:var(--brand-primary);border:2px solid var(--brand-primary);}