/* ---------------------------------------------------------------------------
   Octopus & Son brand tokens.

   Blue leads. Navy is the ink and every dark surface; a lighter blue carries
   links and anything the reader can act on. Amber and green are state and
   nothing else: amber means being worked on now, green means done. Red exists
   but is rationed to the two places something can actually be destroyed.

   Two amber values and two green values exist because the saturated versions
   fail contrast as text on a light background (bright amber is 2.06:1 on
   white). The bright ones are for fills, bars and rules; the ink ones are for
   type. Never swap them.

   Surfaces follow a card model: a soft grey page, white cards with a hairline
   border and a shadow barely there, and corners that are rounded rather than
   square. The earlier version of this file made a point of having no radius
   anywhere; that has been deliberately reversed.
   ------------------------------------------------------------------------- */
:root{
  /* Foundation */
  --navy:#1a2331;
  --navy-2:#2b3648;
  --white:#ffffff;
  --bg:#f1f2f4;
  --surface:#ffffff;
  --surface-2:#f7f8f9;

  /* Blue — the primary. Links, primary actions, anything informational.
     #1f6fb2 is 5.28:1 on white and 4.71:1 on its own tint, so it is safe as
     small type on both. */
  --blue:#1f6fb2;
  --blue-deep:#17537f;       /* hover, and type on the blue tint */
  --blue-bg:#eaf3fa;
  --blue-line:#c3dcef;

  /* Amber — fills and rules only. On the dark entrance this is also the
     type colour: #f4a622 on #14202e is 8.09:1, so the full brand yellow works
     there even though it fails badly on white. */
  --amber:#f4a622;
  --amber-soft:#f8e8ca;
  --amber-faint:#fdf6e8;
  /* Amber — display type, 28px+ only (3.33:1, large-text AA) */
  --amber-display:#b87c1a;
  /* Amber — small type and small caps (5.30:1 on the page background) */
  --amber-ink:#8a5f0d;

  /* Green — reserved for "complete" */
  --green:#1d9e75;
  --green-ink:#147a57;      /* 5.31:1 on white */
  --green-bg:#e8f4ee;
  --green-line:#bce0cf;
  --green-soft:#bce0cf;     /* the light-page "done" fill */
  --green-deep:#13684b;     /* type on that fill — 4.73:1, the lightest that still passes AA */

  /* Red — destructive only. Never used to mean "late" or "bad news"; a client
     behind schedule is amber, not an emergency. */
  --red:#b0412c;
  --red-bg:#fdefec;
  --red-line:#f0cdc4;

  /* Neutrals */
  --line:#eef0f2;           /* hairlines inside a card */
  --line-strong:#e3e5e8;    /* a card's own edge */
  --ink:var(--navy);
  --muted:#626a75;          /* 5.47:1 on white */
  --grey:#8a929c;           /* decorative and large type only */
  --faint:#9aa1a9;
  --ghost:#f3f4f6;

  /* Spacing scale — the fix for things bunching up */
  /* Title bars come in two sizes and no others, admin and client-facing
     alike. H1 is a section's own bar — Clients, Documents, a phase panel.
     H2 is a bar nested inside one, such as a stage inside a phase. A bar
     carrying a control must never sit taller than the bar beside it.  */
  --titlebar-h1:68px;
  --titlebar-h2:57px;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:22px;
  --space-6:30px;
  --space-7:44px;
  --space-8:64px;

  /* Dark entrance surface (login / admin sign-in) */
  --dark-bg:#14202e;
  --dark-surface:#1b2a3a;
  --dark-well:#0f1926;
  --dark-line:#2a3b4f;
  --dark-text:#ffffff;
  --dark-muted:#c9d1da;      /* 10.67:1 on --dark-bg */
  --dark-faint:#9aa6b4;      /*  6.65:1 */
  --dark-placeholder:#5b6b7d;
  --dark-green:#8ed4bb;      /*  9.63:1 — soft enough not to shout on navy */

  /* Shape. Three radii and no others: a card, a control, a pill. */
  --radius:10px;
  --radius-s:6px;
  --radius-pill:999px;
  --shadow:0 1px 2px rgba(16,24,40,.05);
  --shadow-lift:0 2px 6px rgba(16,24,40,.09);
}

*{box-sizing:border-box;}

body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
       "Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;}

.wrap{max-width:1040px;margin:0 auto;padding:var(--space-7) 24px var(--space-8);}

:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}