/**
 * Pleach — Design Tokens
 * Single source of truth for color, type, spacing, motion.
 * All product surfaces (web, deck, doc, app) consume from here.
 *
 * Visual identity: architectural lattice on warm bone canvas.
 * One chromatic (deep botanical green), one rare emphasis (burnt sienna).
 */

:root {
  /* ── Color · accent (deep botanical green, single chromatic) ── */
  --pleach-accent-50:  #6B8E7E;   /* light sage — top of gradient */
  --pleach-accent-100: #4A7361;   /* mid green — primary accent */
  --pleach-accent-300: #2C4A3E;   /* deep green — workhorse */
  --pleach-accent-700: #1A2E25;   /* darkest — weighty fills */

  /* ── Color · emphasis (burnt sienna, sparingly) ── */
  --pleach-fire-100:   #B8553A;   /* primary emphasis — danger, "hot truth" */
  --pleach-fire-300:   #8C3D28;   /* deep emphasis */

  /* ── Color · ink (warm black scale on cream) ── */
  --pleach-ink:       #1C1B1A;   /* warm black — headlines */
  --pleach-ink-2:     #5C5A55;   /* mid warm gray — body */
  --pleach-ink-3:     #8B8880;   /* muted warm gray — captions, eyebrows */

  /* ── Color · surface (warm bone scale) ── */
  --pleach-bg:        #F7F5EE;   /* primary canvas — warm bone */
  --pleach-bg-2:      #EFEAD9;   /* recessed surface */
  --pleach-card:      rgba(28,27,26,0.02);   /* barely-darker tint on cream */
  --pleach-card-strong: rgba(28,27,26,0.04);

  /* ── Color · border (pencil-line weight) ── */
  --pleach-border-subtle: rgba(28,27,26,0.08);
  --pleach-border-accent: rgba(44,74,62,0.20);    /* lattice-line — primary card border */
  --pleach-border-accent-strong: rgba(44,74,62,0.40);

  /* ── Color · semantic ────────────────────────────────── */
  --pleach-danger:      var(--pleach-fire-100);
  --pleach-danger-soft: rgba(184,85,58,0.10);
  --pleach-danger-ink:  #8C3D28;

  /* ── Gradients ───────────────────────────────────────── */
  --pleach-grad-glow:  linear-gradient(135deg, #6B8E7E 0%, #2C4A3E 100%);   /* light sage → deep green */
  --pleach-grad-deep:  linear-gradient(135deg, #4A7361 0%, #1A2E25 100%);   /* mid green → darkest */
  --pleach-grad-card:  linear-gradient(135deg, rgba(74,115,97,0.06) 0%, rgba(44,74,62,0.03) 100%);
  --pleach-grad-ask:   linear-gradient(135deg, rgba(74,115,97,0.04) 0%, rgba(44,74,62,0.02) 100%);
  --pleach-grad-page:
    radial-gradient(circle at 100% 0%, rgba(28,27,26,0.04), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(28,27,26,0.03), transparent 60%),
    var(--pleach-bg);

  /* ── Typography · families ───────────────────────────── */
  --pleach-font-sans: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Display", system-ui, sans-serif;
  --pleach-font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ── Typography · weights ────────────────────────────── */
  --pleach-weight-regular:  400;
  --pleach-weight-medium:   500;
  --pleach-weight-semibold: 600;

  /* ── Typography · sizes (responsive where it matters) ── */
  --pleach-fs-caption:  12px;
  --pleach-fs-meta:     13px;
  --pleach-fs-body:     15px;
  --pleach-fs-body-lg:  17px;
  --pleach-fs-lede:     clamp(18px, 1.6vw, 22px);
  --pleach-fs-h3:       22px;
  --pleach-fs-title:    clamp(40px, 5.4vw, 76px);
  --pleach-fs-massive:  clamp(56px, 8vw, 116px);

  /* ── Typography · letter-spacing ─────────────────────── */
  --pleach-track-tightest: -0.03em;   /* massive display */
  --pleach-track-tighter:  -0.02em;   /* title */
  --pleach-track-wide:     0.10em;    /* pills */
  --pleach-track-wider:    0.18em;    /* brand caps */
  --pleach-track-widest:   0.28em;    /* eyebrow */

  /* ── Spacing scale (4px base) ────────────────────────── */
  --pleach-space-1:  4px;
  --pleach-space-2:  8px;
  --pleach-space-3:  12px;
  --pleach-space-4:  16px;
  --pleach-space-6:  24px;
  --pleach-space-8:  32px;
  --pleach-space-10: 40px;
  --pleach-space-12: 48px;
  --pleach-space-16: 64px;
  --pleach-space-20: 80px;

  /* ── Radius ──────────────────────────────────────────── */
  --pleach-radius-sm:   8px;
  --pleach-radius-md:   12px;
  --pleach-radius-lg:   16px;   /* cards */
  --pleach-radius-pill: 999px;

  /* ── Motion ──────────────────────────────────────────── */
  --pleach-duration-fast: 200ms;
  --pleach-duration-base: 300ms;
  --pleach-duration-slow: 400ms;
  --pleach-ease-out:  ease-out;
  --pleach-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ──────────────────────────────────────────── */
  --pleach-container-max:  1200px;
  --pleach-container:      min(1200px, 92vw);

  /* ── Geometry — diagonal lattice replaces honeycomb ─── */
  --pleach-lattice-tile:   32px 32px;
  --pleach-lattice-pattern:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><line x1='0' y1='0' x2='32' y2='32' stroke='%231C1B1A' stroke-opacity='0.045' stroke-width='0.5'/><line x1='32' y1='0' x2='0' y2='32' stroke='%231C1B1A' stroke-opacity='0.045' stroke-width='0.5'/></svg>");
}

/* ── Base text helpers ─────────────────────────────────── */
.pleach-eyebrow {
  color: var(--pleach-accent-300);
  font-size: var(--pleach-fs-meta);
  letter-spacing: var(--pleach-track-widest);
  text-transform: uppercase;
  font-weight: var(--pleach-weight-semibold);
}
.pleach-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--pleach-radius-pill);
  font-size: var(--pleach-fs-caption);
  letter-spacing: var(--pleach-track-wide);
  text-transform: uppercase;
  font-weight: var(--pleach-weight-semibold);
  background: rgba(74,115,97,0.10);
  color: var(--pleach-accent-300);
  border: 1px solid var(--pleach-border-accent-strong);
}
.pleach-pill--danger {
  background: var(--pleach-danger-soft);
  color: var(--pleach-danger-ink);
  border-color: rgba(184,85,58,0.30);
}
.pleach-card {
  background: var(--pleach-card);
  border: 1px solid var(--pleach-border-accent);
  border-radius: var(--pleach-radius-lg);
  padding: var(--pleach-space-8);
}
.pleach-accent-text {
  background: var(--pleach-grad-glow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}