/* PANDO color system
   Base palette is fixed by the brand: six values + the page grey.
   The system is near-monochrome: flat grey field, hairline grey rules,
   near-black type, and forest green reserved for the gradient artwork. */
:root{
  /* --- base palette --- */
  --pando-page:#e3e3e3;      /* page field — every surface sits on this */
  --pando-sand:#e8e6d9;      /* warm cream, gradient highlight */
  --pando-sage:#d0dbc6;      /* pale green, gradient midtone */
  --pando-forest:#182d14;    /* deep forest, gradient core / brand green */
  --pando-grey:#b3b3b3;      /* hairline rules, disabled type */
  --pando-ink:#333333;       /* secondary type */
  --pando-black:#010101;     /* primary type, logo */
  --pando-white:#ffffff;

  /* --- neutral steps derived from the palette --- */
  --pando-grey-soft:rgba(1,1,1,.08);
  --pando-grey-hair:rgba(1,1,1,.14);
  --pando-ink-60:rgba(51,51,51,.60);

  /* --- semantic: surface --- */
  --surface-page:var(--pando-page);
  --surface-card:transparent;          /* cards are outlined, never filled */
  --surface-card-hover:rgba(255,255,255,.34);
  --surface-inverse:var(--pando-forest);
  --surface-sand:var(--pando-sand);
  --surface-sage:var(--pando-sage);

  /* --- semantic: text --- */
  --text-primary:var(--pando-black);
  --text-secondary:var(--pando-ink);
  --text-muted:var(--pando-grey);
  --text-inverse:var(--pando-white);
  --text-link:var(--pando-black);
  --text-link-hover:var(--pando-forest);

  /* --- semantic: line --- */
  --line-hairline:var(--pando-grey);   /* 1px card / pill outline */
  --line-strong:var(--pando-black);
  --line-faint:var(--pando-grey-hair);

  /* --- semantic: interactive --- */
  --action-solid-bg:var(--pando-black);
  --action-solid-fg:var(--pando-white);
  --action-solid-bg-hover:var(--pando-forest);
  --action-outline-fg:var(--pando-black);
  --action-outline-line:var(--pando-grey);
  --action-outline-line-hover:var(--pando-black);
  --action-disabled-fg:var(--pando-grey);

  /* --- brand artwork --- */
  --gradient-blob:url("../assets/gradient-blob.png"); /* @kind other */
  --gradient-field:url("../assets/gradient-field.png"); /* @kind other */
  /* CSS fallback for the mesh gradient when the raster is unavailable */
  --gradient-mesh:radial-gradient(120% 120% at 78% 12%,var(--pando-sand) 0%,var(--pando-sage) 34%,var(--pando-forest) 88%);
}