/* ABOUTME: Supplies the existing DevPlant brand tokens and local fonts. */
/* ABOUTME: Retains the palette and typography from the DevPlant design system. */
/* ================================================================
   DevPlant Design System — Design Tokens
   Extracted from github.com/DevPlant/website

   Two sub-brands share one system:
   - DevPlant (dev)       — software development agency
   - DevPlant Academy     — AI workshops & training
   (DevPlant Cowork lives in a separate project.)
   ================================================================ */

/* ----- FONTS ----- */

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Overpass Mono and Open Sans are now self-hosted from the brand font upload.
   Inter is the local fallback. */

@font-face {
  font-family: "Overpass Mono";
  src: url("fonts/OverpassMono-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/OverpassMono-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-VariableFont_wdth_wght.ttf") format("truetype-variations"),
       url("fonts/OpenSans-VariableFont_wdth_wght.ttf") format("truetype");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -------- COLOR -------- */

  /* The one green. This is "DevPlant green" — the accent used literally
     everywhere in the product. It's also the sprout color in the logo. */
  --dp-green: #66bb6a;
  --dp-green-ink: #2c6b2f;    /* for green-on-white type, derived */
  --dp-green-soft: #e6f4e7;   /* green tint for hover / soft backgrounds, derived */

  /* Ink scale — the codebase uses these as text + surface values.
     Dark surfaces (dev list-card header, footer, testimonials band) use
     pure black. The original sass had a near-black navy ($navy #16233f);
     we collapsed to true black for a simpler, harder-edged system. */
  --dp-black: #000000;          /* page text on light; headers; dark surfaces */
  --dp-text-primary: #212121;   /* body text on light */
  --dp-text-secondary: #424242; /* secondary body */
  --dp-text-tertiary: #616161;  /* tertiary / captions, derived */

  /* Surfaces */
  --dp-white: #ffffff;
  --dp-bg-light: #fafafa;   /* page background tier 1 */
  --dp-bg-medium: #eeeeee;  /* page background tier 2 (hover) */
  --dp-bg-cta: #e0e0e0;     /* CTA band on marketing pages */
  --dp-divider: #d4d4d4;

  /* Status — DevPlant doesn't ship a formal status palette, so these are
     derived to sit alongside the green without clashing. Use sparingly. */
  --dp-warn: #e9a13b;
  --dp-error: #c0392b;
  --dp-info: #3a6ea5;

  /* -------- TYPOGRAPHY -------- */

  /* "Inter" is the local fallback file. "Open Sans" is the webfont body
     face from the actual site. Chain so either loads. */
  --dp-font-body: "Open Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Overpass Mono is the DevPlant wordmark font. Used for H1–H4,
     code-feel labels, and monospace flourishes like "// anna" contact tags. */
  --dp-font-heading: "Overpass Mono", "Inter", ui-monospace, Menlo, monospace;
  --dp-font-mono: "Overpass Mono", ui-monospace, Menlo, monospace;

  /* Type scale — lifted from the sass partials */
  --dp-fs-hero: 72px;          /* hero headline, desktop */
  --dp-fs-hero-tablet: 52px;
  --dp-fs-hero-mobile: 40px;

  --dp-fs-h1: 56px;
  --dp-fs-h2: 40px;
  --dp-fs-h2-tablet: 32px;
  --dp-fs-h2-mobile: 28px;

  --dp-fs-h3: 28px;
  --dp-fs-h4: 22px;
  --dp-fs-h4-tablet: 20px;
  --dp-fs-h4-mobile: 18px;

  --dp-fs-body: 18px;
  --dp-fs-body-tablet: 16px;
  --dp-fs-body-mobile: 15px;

  --dp-fs-small: 14px;
  --dp-fs-caption: 12px;

  --dp-lh-tight: 1.15;
  --dp-lh-body: 1.6;
  --dp-lh-body-mobile: 1.55;

  /* -------- SPACING -------- */
  /* 4px base — matches the 4/8/16/24/32 rhythm in the scss */
  --dp-space-1: 4px;
  --dp-space-2: 8px;
  --dp-space-3: 12px;
  --dp-space-4: 16px;
  --dp-space-5: 20px;
  --dp-space-6: 24px;
  --dp-space-8: 32px;
  --dp-space-10: 40px;
  --dp-space-12: 48px;
  --dp-space-14: 56px;
  --dp-space-16: 64px;
  --dp-space-20: 80px;
  --dp-space-24: 96px;

  /* -------- RADII -------- */
  /* DevPlant is SQUARE. Almost everything has radius 0.
     The few rounded elements (buttons on mobile, some tags) use 4px. */
  --dp-radius-0: 0;
  --dp-radius-sm: 4px;
  --dp-radius-pill: 999px;  /* reserved for tag chips; almost never used */

  /* -------- SHADOWS -------- */
  /* Flat aesthetic. Shadows are a last resort. */
  --dp-shadow-card: 0 2px 4px rgba(0, 0, 0, 0.08);
  --dp-shadow-lift: 0 6px 16px rgba(0, 0, 0, 0.12);
  --dp-shadow-focus: 0 0 0 3px rgba(102, 187, 106, 0.35);

  /* -------- BORDERS -------- */
  --dp-border: 1px solid var(--dp-divider);
  --dp-border-accent: 4px solid var(--dp-green); /* the hoverable left-rail */

  /* -------- MOTION -------- */
  --dp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dp-dur-fast: 150ms;
  --dp-dur-base: 300ms;
  --dp-dur-slow: 500ms;
}