/* Jay Scotts colour system — Brand Web Standard 2026 */
:root{
  /* --- Primary brand --- */
  --js-ocean-blue:#1370A0;      /* gradients, button variations */
  --js-deep-ocean:#0E5679;      /* navigation, headings, buttons, active states, dividers */
  --js-warm-cream:#EAD9CE;      /* cards, panels, background layering, hover states */
  --js-deep-charcoal:#172426;   /* body text, labels, descriptions, captions */
  --js-white:#FFFFFF;           /* main backgrounds, primary surfaces */

  /* --- Secondary brand --- */
  --js-soft-white:#FAF8F4;      /* page ground, softest layer */
  --js-pearl:#F2EDE4;           /* section breaks, subtle layering */
  --js-cream:#EDE8DE;           /* architectural warmth, panel variation */
  --js-sand:#D4C9B8;            /* borders, dividers, supporting hierarchy */
  --js-deep-navy:#0A1520;       /* deep contrast, premium dark backgrounds */

  /* --- Heritage naturals (earlier brand guide; accents + editorial only) --- */
  --js-moss:#32402D;
  --js-olive-grey:#8C8570;
  --js-taupe:#C0AE9F;
  --js-clay:#A68F81;
  --js-graphite:#414042;

  /* --- Derived tints/shades (oklch-harmonised from the primaries) --- */
  --js-ocean-blue-hover:#115F89;
  --js-ocean-blue-press:#0E5679;
  --js-deep-ocean-hover:#0B4865;
  --js-deep-ocean-press:#093B54;
  --js-deep-ocean-08:rgba(14,86,121,.08);
  --js-deep-ocean-16:rgba(14,86,121,.16);
  --js-deep-ocean-40:rgba(14,86,121,.40);
  --js-charcoal-60:rgba(23,36,38,.60);
  --js-charcoal-40:rgba(23,36,38,.40);
  --js-charcoal-12:rgba(23,36,38,.12);
  --js-sand-50:rgba(212,201,184,.5);

  /* --- Semantic: surfaces --- */
  --surface-page:var(--js-white);
  --surface-page-alt:var(--js-soft-white);
  --surface-section:var(--js-pearl);
  --surface-panel:var(--js-cream);
  --surface-card:var(--js-white);
  --surface-card-warm:var(--js-warm-cream);
  --surface-inverse:var(--js-deep-navy);
  --surface-accent:var(--js-deep-ocean);
  --surface-hover:var(--js-warm-cream);
  --surface-scrim:rgba(10,21,32,.62);

  /* --- Semantic: text --- */
  --text-body:var(--js-deep-charcoal);
  --text-muted:var(--js-charcoal-60);
  --text-heading:var(--js-deep-ocean);
  --text-display:var(--js-deep-ocean);
  --text-accent:var(--js-ocean-blue);
  --text-on-inverse:var(--js-soft-white);
  --text-on-inverse-muted:rgba(250,248,244,.68);
  --text-on-accent:var(--js-white);
  --text-link:var(--js-deep-ocean);
  --text-link-hover:var(--js-ocean-blue);
  --text-disabled:var(--js-charcoal-40);

  /* --- Semantic: lines --- */
  --border-hairline:var(--js-sand);
  --border-subtle:var(--js-sand-50);
  --border-strong:var(--js-deep-ocean);
  --border-inverse:rgba(250,248,244,.22);
  --divider-rule:var(--js-deep-ocean);
  --focus-ring:var(--js-ocean-blue);

  /* --- Semantic: interactive --- */
  --action-primary:var(--js-deep-ocean);
  --action-primary-hover:var(--js-deep-ocean-hover);
  --action-primary-press:var(--js-deep-ocean-press);
  --action-secondary:transparent;
  --action-secondary-border:var(--js-deep-ocean);
  --action-disabled:var(--js-sand);

  /* --- Semantic: status (derived — no status palette in the brand guide) --- */
  --status-success:#3F5B3C;
  --status-success-bg:#EDF1EC;
  --status-warning:#B4761C;
  --status-warning-bg:#FBF2E4;
  --status-danger:#9C2A20;
  --status-danger-bg:#F8ECEA;
  --status-info:var(--js-ocean-blue);
  --status-info-bg:#E8F1F6;

  /* --- Gradients (Ocean Blue is the designated gradient colour) --- */
  --gradient-ocean:linear-gradient(135deg,#1370A0 0%,#0E5679 100%); /* @kind color */
  --gradient-ocean-soft:linear-gradient(180deg,rgba(19,112,160,.10) 0%,rgba(19,112,160,0) 100%); /* @kind color */
  --gradient-protect-bottom:linear-gradient(180deg,rgba(10,21,32,0) 0%,rgba(10,21,32,.28) 46%,rgba(10,21,32,.78) 100%); /* @kind color */
  --gradient-protect-top:linear-gradient(180deg,rgba(10,21,32,.62) 0%,rgba(10,21,32,0) 100%); /* @kind color */
}