/* =========================================================================
   WWS design tokens — the one place the look of everything is decided.
   Brand reference: BRAND.md.

   THIS FILE IS THE SOURCE OF TRUTH. Four front ends load it:

     wisemanwebservices.co.uk/        assets/brand.css      (this file)
     wisemanwebservices.co.uk/admin/  ../assets/brand.css   (this file)
     portal.wisemanwebservices.co.uk  brand.css             (a COPY)
     salesforce.…co.uk                brand.css             (a COPY)

   The two portals are separate Plesk subdomains with their own document
   roots, so they can't reach this file over HTTP — they each carry a
   byte-identical copy. **Change this file and you must copy it over both**,
   the same way admin/lib/db.php and portal/lib/db.php are kept in step.

   Nothing in here styles a component. It sets tokens and a thin base layer,
   and each front end builds its own components on top — so a change here
   moves all four at once without any of them fighting the others.

   ---- Using the colours -------------------------------------------------
   Every state colour comes in three weights, because the brand hues are
   chosen to look right, not to be legible as small text:

     --green        the brand hue. Borders, icons, chart fills, big shapes.
     --green-ink    a darkened version that passes contrast. Use this for
                    text, and for a solid fill that has white text on it.
     --green-tint   the pale wash for a highlighted row or a status pill.

   Signal blue on white is 3.9:1 — fine for a button face, NOT enough for
   13px link text. That's what --blue-ink is for. Reach for the plain hue
   when it's a shape, and the -ink when a person has to read it.
   ========================================================================= */

:root {
  /* ---- brand ---- */
  --wws-navy: #10243E;        /* ink navy — headers, sidebars, footers */
  --wws-navy-deep: #0B1B30;   /* one step down, for depth against navy */
  --wws-navy-soft: #16283F;   /* the admin sidebar face */
  --wws-blue: #2D7DF6;        /* signal blue — buttons, accents */
  --wws-blue-ink: #1D5FBF;    /* readable blue — link text, hover fills */
  --wws-blue-soft: #7FA8DC;   /* the logo strokes on navy */
  --wws-blue-tint: #E8F0FC;   /* selected rows, quiet callouts */
  --wws-slate: #52677E;       /* secondary text */
  --wws-mist: #F4F7FB;        /* page background, light sections */
  --wws-ink: #0C1A2B;         /* body text */
  --wws-white: #FFFFFF;

  /* ---- gradients ----
     The 2026 redesign's depth comes from these three, not from new colours:
     every stop is a brand colour or a step of one. -navy is the hero and the
     portal top bars, -blue is a primary button face (white text on every stop
     still passes contrast — the lightest stop is used only in the top corner
     a button is lit from), -sheen is a near-invisible wash for lifting a
     card's top edge off white. */
  --wws-grad-navy: linear-gradient(150deg, #17304F 0%, #10243E 48%, #0B1B30 100%);
  --wws-grad-blue: linear-gradient(135deg, #4A90F7 0%, #2D7DF6 52%, #1D66DE 100%);
  --wws-grad-sheen: linear-gradient(180deg, rgba(45, 125, 246, .07), rgba(45, 125, 246, 0) 42%);

  /* ---- lines ---- */
  --wws-line: #E2E8F1;        /* the standard hairline */
  --wws-line-strong: #CBD6E4;  /* when a border needs to be seen */

  /* ---- state ---- */
  --wws-green: #1E9E6A;
  --wws-green-ink: #16794F;
  --wws-green-tint: #E7F6EF;
  --wws-amber: #E0992A;
  --wws-amber-ink: #9A6706;
  --wws-amber-tint: #FDF3E2;
  --wws-red: #D6453C;
  --wws-red-ink: #C23B3B;
  --wws-red-tint: #FCEDEC;

  /* ---- type ---- */
  --wws-font-head: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wws-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wws-font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ---- corners ---- */
  --wws-radius-sm: 8px;       /* nav items, small pills, inputs in dense UI */
  --wws-radius: 12px;         /* the default — cards, panels, buttons */
  --wws-radius-lg: 16px;      /* hero panels, modals */
  --wws-radius-xl: 22px;      /* the marketing site's feature cards */
  --wws-radius-pill: 999px;

  /* ---- depth ----
     Three steps and no more. Anything flat on the page uses none of them;
     sm lifts a card off the background, md is a hover, lg is a modal or a
     drawer that sits above everything. */
  --wws-shadow-sm: 0 1px 2px rgba(16, 36, 62, .06), 0 1px 3px rgba(16, 36, 62, .05);
  --wws-shadow-md: 0 6px 18px rgba(16, 36, 62, .10);
  --wws-shadow-lg: 0 18px 44px rgba(16, 36, 62, .18);
  --wws-shadow-focus: 0 0 0 3px rgba(45, 125, 246, .30);
  /* Under a signal-blue button only. A grey shadow under a saturated blue
     fill reads as dirt; this is the same shadow in the button's own hue. */
  --wws-shadow-blue: 0 8px 22px rgba(45, 125, 246, .30);

  /* ---- spacing ----
     A 4px scale. Use these instead of typing numbers, so the gaps between
     things line up across four codebases that were written months apart. */
  --wws-space-1: 4px;
  --wws-space-2: 8px;
  --wws-space-3: 12px;
  --wws-space-4: 16px;
  --wws-space-5: 20px;
  --wws-space-6: 24px;
  --wws-space-8: 32px;
  --wws-space-10: 40px;

  /* ---- motion ----
     Fast for a hover, base for anything that moves or resizes. Both are
     switched off further down for anyone who asks for less motion. */
  --wws-ease: cubic-bezier(.2, .7, .3, 1);
  --wws-speed-fast: .12s;
  --wws-speed: .2s;
}

/* ---- base layer -------------------------------------------------------
   Deliberately tiny. Every rule here is either something all four front
   ends already did separately, or an accessibility fix none of them had. */

* { box-sizing: border-box; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* One focus ring everywhere. Before this, keyboard focus was the browser
   default in the admin and the portals — a thin dotted outline that
   disappears entirely against the navy sidebar. :focus-visible means it
   shows for keyboard users and stays out of the way of the mouse. */
:focus-visible {
  outline: 2px solid var(--wws-blue);
  outline-offset: 2px;
  border-radius: var(--wws-radius-sm);
}
/* On the navy sidebar and top bars, signal blue on ink navy is too dark to
   spot. Anything inside a .sidebar or .topbar gets the light stroke instead. */
.sidebar :focus-visible,
.topbar :focus-visible,
.site-header :focus-visible {
  outline-color: var(--wws-blue-soft);
}

/* A disabled control should look unavailable, not just refuse to work. */
button[disabled],
input[disabled],
select[disabled],
textarea[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

::selection {
  background: var(--wws-blue-tint);
  color: var(--wws-navy);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}