/* ==========================================================================
   Sellva — visual tokens.

   The Sellva palette, applied lightly: navy and graphite still carry the
   structure, Fern green is the functional accent, Foxglove pink marks the
   commercial action (the demo CTA) and nothing else, and the light surfaces
   are warm Linen rather than cool grey.

   These are the reference values. Existing stylesheets still carry literal
   hex, and were shifted onto this palette by a global mapping rather than a
   rewrite; new work should use the variables so the literals can be retired
   file by file.
   ========================================================================== */

:root {
  /* Ink — headings, primary text, dark surfaces */
  --sns-ink-900: #101828;   /* near-black navy: primary CTA, dark sections */
  --sns-ink-800: #111827;
  --sns-ink-700: #172033;
  --sns-ink-600: #1D2939;   /* cards on dark */

  /* Graphite — secondary text, icons */
  --sns-grey-700: #374151;
  --sns-grey-600: #475569;
  --sns-grey-500: #667085;

  /* Cool grey — borders, muted text, dividers */
  --sns-grey-400: #98A2B3;
  --sns-grey-300: #CBD5E1;
  --sns-grey-200: #D9E0E8;
  --sns-grey-100: #E4E9EF;

  /* Light surfaces */
  --sns-surface-1: #FFFFFF;
  --sns-surface-2: #F6F7F2;
  --sns-surface-3: #F6F7F2;
  --sns-surface-4: #F6F7F2;

  /* Accent — Fern, the one colour that carries meaning. The --sns-blue-*
     names are kept so existing references keep working; they now hold the
     Fern scale. */
  --sns-blue-700: #33683F;   /* Fern hover */
  --sns-blue-600: #3F7D4E;   /* Fern — primary accent */
  --sns-blue-500: #4F9160;
  --sns-blue-200: #C9DEC8;
  --sns-blue-100: #E3EEE2;   /* Clover tint */
  --sns-steel:    #8FA395;   /* very subtle sage */

  /* Call to action — Foxglove deepened so a white label passes (4.8:1).
     Only the commercial action wears it. */
  --sns-cta: #B64F78;
  --sns-cta-hover: #A4456B;

  /* Brand — the wordmark is Fern; Foxglove is its contrast version */
  --sns-brand: #3F7D4E;
  --sns-brand-contrast: #D9789A;

  /* Status, kept restrained */
  --sns-ok: #047857;
  --sns-warn: #B45309;
  --sns-risk: #BE123C;

  /* Borders and shadows — separation, not decoration */
  --sns-border: rgba(15, 23, 42, 0.08);
  --sns-border-strong: rgba(15, 23, 42, 0.14);
  --sns-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --sns-shadow-md: 0 4px 14px rgba(16, 24, 40, 0.06);
  --sns-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.08);

  /* Materials — chrome read as light on a surface, never as an effect */
  --sns-chrome-light: linear-gradient(180deg, #FFFFFF 0%, #F6F7F2 100%);
  --sns-chrome-metal: linear-gradient(135deg, #F6F7F2 0%, #DDE3EA 52%, #FFFFFF 100%);
  --sns-chrome-dark: linear-gradient(160deg, #101828 0%, #1D2939 62%, #374151 100%);

  /* Primary-button hover: the brand mark's brushed metal, with one chrome
     sweep. The lightest stop is #545E6A, so white label text still clears
     6.4:1 at the brightest point of the button. */
  --sns-chrome-hover: linear-gradient(101deg,
    #14181D 0%, #22262B 24%, #333B45 42%,
    #454F5C 50%, #545E6A 55%, #363E48 68%,
    #1E2329 84%, #14181D 100%);

  /* Radii — tighter than the previous marketing-bubble rounding */
  --sns-radius-sm: 8px;
  --sns-radius-md: 12px;
  --sns-radius-lg: 16px;
}