/* ============================================================
   PONCE HOMES — DESIGN SYSTEM FOUNDATIONS
   Colors + Type tokens. Import this into any artifact:
     <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* ---------- FONTS (self-hosted) ---------- */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/Archivo-SemiBold.ttf') format('truetype');
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;
  src:url('fonts/Archivo-Black.ttf') format('truetype');
}
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/DMSans-Regular.ttf') format('truetype');
}
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/DMSans-SemiBold.ttf') format('truetype');
}
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/DMSans-Bold.ttf') format('truetype');
}
@font-face{
  font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/BarlowCondensed-ExtraBold.ttf') format('truetype');
}
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:300;font-display:swap;
  src:url('fonts/Fraunces-LightItalic.ttf') format('truetype');
}

:root{
  /* ============ BRAND PALETTE ============ */
  --pine:#153625;            /* primary — backgrounds, headers, sidebar */
  --champagne:#C9A96E;       /* accent — CTAs, highlights, rules */
  --obsidian:#0D0D0D;        /* dark text, dark backgrounds */
  --off-white:#F5F2ED;       /* light backgrounds, body text on dark */
  --warm-gray:#8A8A8A;       /* secondary text, captions */
  --sage:#4AE08A;            /* ELECTRIC SAGE — content highlight only, never logo */

  /* ============ PINE RAMP (UI tints) ============ */
  --pine-900:#0E2418;
  --pine-700:#153625;        /* = --pine */
  --pine-600:#1E4A32;
  --pine-500:#2D6B48;
  --pine-pale:#E4EDE8;       /* tinted fill behind pine content */

  /* ============ CHAMPAGNE RAMP ============ */
  --champagne-deep:#B08F52;
  --champagne-700:#C9A96E;   /* = --champagne */
  --champagne-pale:#F0E7D6;

  /* ============ NEUTRALS (warm) ============ */
  --white:#FFFFFF;
  --gray-100:#F0EDE8;
  --gray-200:#E0DDD6;
  --gray-400:#A09D96;
  --gray-600:#6B6860;

  /* ============ SEMANTIC TEXT ============ */
  --text-primary:#0D0D0D;
  --text-secondary:#5A5750;
  --text-muted:#9A9790;
  --text-on-pine:#F5F2ED;
  --text-on-pine-dim:rgba(245,242,237,0.55);

  /* ============ STATUS ============ */
  --red:#C0392B;
  --amber:#D97706;
  --success:#15803D;
  --info:#1D4ED8;

  /* ============ SURFACES ============ */
  --surface:#FFFFFF;
  --surface-sunken:#F5F2ED;
  --border:#E0DDD6;
  --border-strong:#A09D96;

  /* ============ TYPE FAMILIES ============ */
  --font-display:'Archivo', system-ui, sans-serif;      /* titles, headers, stats */
  --font-body:'DM Sans', system-ui, sans-serif;          /* body copy, UI */
  --font-impact:'Barlow Condensed', system-ui, sans-serif; /* PERSONALITY mode only */
  --font-editorial:'Fraunces', Georgia, serif;           /* rare italic editorial accent */

  /* ============ TYPE SCALE ============ */
  --fs-display:42px;   /* hero numbers, big stat */
  --fs-h1:32px;
  --fs-h2:22px;
  --fs-h3:17px;
  --fs-body:14px;
  --fs-sm:13px;
  --fs-xs:11px;
  --fs-eyebrow:10px;   /* uppercase labels */

  /* ============ RADII ============ */
  --r-sm:6px;
  --r-md:8px;
  --r-lg:10px;
  --r-xl:12px;
  --r-pill:999px;

  /* ============ ELEVATION ============ */
  --shadow-sm:0 1px 2px rgba(13,13,13,0.04);
  --shadow-card:0 4px 16px rgba(21,54,37,0.08);
  --shadow-card-hover:0 4px 16px rgba(21,54,37,0.10);
  --shadow-pop:0 24px 80px rgba(0,0,0,0.30);

  /* ============ SPACING (4px base) ============ */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-9:36px;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY HELPERS
   ============================================================ */
.ds-eyebrow{
  font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--text-muted);
}
.ds-h1{font-family:var(--font-display);font-size:var(--fs-h1);font-weight:600;line-height:1.1;color:var(--text-primary);}
.ds-h2{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:600;line-height:1.15;color:var(--text-primary);}
.ds-h3{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:600;line-height:1.2;color:var(--text-primary);}
.ds-stat{font-family:var(--font-display);font-size:var(--fs-display);font-weight:600;line-height:1;color:var(--pine);}
.ds-body{font-family:var(--font-body);font-size:var(--fs-body);font-weight:400;line-height:1.7;color:var(--text-secondary);}
.ds-caption{font-family:var(--font-body);font-size:var(--fs-xs);color:var(--text-muted);}

/* PERSONALITY MODE — bold, condensed, all-caps. Social / Reels only. */
.ds-impact{
  font-family:var(--font-impact);font-weight:800;text-transform:uppercase;
  line-height:0.95;letter-spacing:0.5px;color:var(--off-white);
}
.ds-impact .hl{color:var(--sage);}        /* electric sage highlight */
.ds-impact .gold{color:var(--champagne);}

/* Rare editorial italic — pull quotes, "a note from Chris" */
.ds-editorial{font-family:var(--font-editorial);font-style:italic;font-weight:300;color:var(--text-primary);}