/* ============================================================
   DENVER PIAZZA — DESIGN TOKENS
   Source of truth. Values mirror the Figma "Brand System" variables
   1:1 (file: Denver Piazza — Brand System).
   Import order: fonts.css -> tokens.css -> components.css
   ============================================================ */

:root {
  /* ---- Brand color (Figma variables) ---- */
  --dp-forest:    #1E4C28;  /* Brand/Forest Green — primary text, headlines, dark surfaces */
  --dp-leaf:      #85B774;  /* Brand/Leaf Green — secondary, labels, supporting */
  --dp-lime:      #D4E55A;  /* Accent/Lime — pills, highlights, primary action */
  --dp-coral:     #FF9966;  /* Accent/Coral — energy, calls to action */
  --dp-sky:       #8ABDF3;  /* Accent/Sky Blue — mobility, info, water */
  --dp-bone:      #EFECEA;  /* Surface/Bone — page background */
  --dp-white:     #FFFFFF;  /* Surface/White — cards */
  --dp-hairline:  #D9D4CC;  /* card borders on light surfaces */

  /* ---- Derived tints (for quiet fills / hovers) ---- */
  --dp-leaf-tint:  #E7F0E2;
  --dp-lime-tint:  #F2F6D5;
  --dp-coral-tint: #FFE7DA;
  --dp-sky-tint:   #E2EEFB;
  --dp-forest-deep:#163A1E;  /* darker forest for hover on lime/leaf */

  /* ---- Semantic roles ---- */
  --dp-bg:            var(--dp-bone);
  --dp-surface:       var(--dp-white);
  --dp-text:          var(--dp-forest);
  --dp-text-on-dark:  var(--dp-bone);
  --dp-text-muted:    var(--dp-leaf);
  --dp-border:        var(--dp-hairline);
  --dp-primary:       var(--dp-lime);    /* primary action fill */
  --dp-primary-ink:   var(--dp-forest);  /* text on primary */
  --dp-focus:         var(--dp-sky);

  /* ---- Typography ---- */
  --dp-font-display: "Alte Haas Grotesk", "Archivo", Arial, sans-serif;
  --dp-font-mono:    "Roboto Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Type scale (from Figma text styles) */
  --dp-display:      clamp(3.25rem, 8vw, 5.3125rem); /* 52 -> 85 · Alte Haas Bold */
  --dp-h1:           clamp(2.5rem, 6vw, 3.375rem);   /* ~54 */
  --dp-h2:           2.125rem;   /* 34 · Alte Haas Bold */
  --dp-h3:           1.5rem;     /* 24 */
  --dp-label:        1.5rem;     /* 24 · Roboto Mono · uppercase eyebrow */
  --dp-body:         1.125rem;   /* 18 · Roboto Mono */
  --dp-caption:      0.875rem;   /* 14 · Roboto Mono · uppercase */
  --dp-micro:        0.6875rem;  /* 11 · swatch labels */

  /* Display / heading metrics */
  --dp-leading-display: 0.95;
  --dp-leading-heading: 1.0;
  --dp-leading-body:    1.5;
  --dp-leading-label:   1.2;

  --dp-track-display: -0.06em;  /* tight, like -6 @ 85 */
  --dp-track-h2:      -0.04em;  /* -2 @ 34 */
  --dp-track-label:   0.04em;   /* +1 @ 24, mono caps */
  --dp-track-caption: 0.06em;

  --dp-weight-regular: 400;
  --dp-weight-medium:  500;
  --dp-weight-bold:    700;

  /* ---- Spacing (4px base) ---- */
  --dp-space-1:  4px;
  --dp-space-2:  8px;
  --dp-space-3:  12px;
  --dp-space-4:  16px;
  --dp-space-5:  24px;
  --dp-space-6:  32px;
  --dp-space-7:  48px;
  --dp-space-8:  64px;
  --dp-space-9:  96px;

  /* ---- Radius ---- */
  --dp-radius-sm:   8px;
  --dp-radius:      12px;   /* cards / swatches (Figma rounded-[12px]) */
  --dp-radius-lg:   20px;
  --dp-radius-pill: 999px;  /* pills + buttons */

  /* ---- Borders ---- */
  --dp-border-width: 1px;
  --dp-border-default: var(--dp-border-width) solid var(--dp-border);

  /* ---- Elevation (flat brand — used sparingly) ---- */
  --dp-shadow-sm: 0 1px 2px rgba(30,76,40,.06);
  --dp-shadow:    0 10px 30px rgba(30,76,40,.10);

  /* ---- Layout ---- */
  --dp-maxw:   1152px;   /* matches Figma 1280 frame - 64 gutters */
  --dp-gutter: 64px;

  /* ---- Motion ---- */
  --dp-ease: cubic-bezier(.2,.7,.3,1);
  --dp-dur:  170ms;

  /* ---- The signature Color Bar (Coral · Leaf · Sky · Lime) ---- */
  --dp-bar: linear-gradient(
    90deg,
    var(--dp-coral) 0 25%,
    var(--dp-leaf)  25% 50%,
    var(--dp-sky)   50% 75%,
    var(--dp-lime)  75% 100%
  );
}

@media (max-width: 640px) {
  :root { --dp-gutter: 24px; }
}