/* ProTech Innovations — design-system layer (redesign agent 01)
   ------------------------------------------------------------------
   LAYERS AFTER assets/css/main.css. It never replaces main.css and
   never edits it. Integration adds, after the main.css <link>:
     <link rel="stylesheet" href="assets/css/design-system.css">
   (ar/index.html uses ../assets/css/design-system.css.)

   Purpose: the single token source other redesign agents build on,
   plus refined type, button, card, section, divider, surface and
   motion utilities. Every colour pair used for text was verified
   against WCAG AA (4.5:1 normal text) — see REPORT.md for the table.

   Hard rules honoured here:
   - System font stack only. No webfonts, no external requests: this
     file contains no url(), no @import, no remote reference.
   - No layout-shifting styles: hover / focus / active states change
     only colour, background, border-colour, box-shadow, outline and
     transform. Border widths, padding, margins and font sizes never
     change between states. transform never affects layout.
   - No copy is touched: this file styles, it does not add content.
   - Teal #20C9C0 is NEVER used for text on a light background
     (2.06:1 on white — fails AA). It is used only as an accent on
     navy (9.07:1) and as a graphic bar, never as small text on white.
   - .reveal is a progressive-enhancement hook only: the motion agent
     must add the class with JavaScript together with its
     IntersectionObserver. Pages must never ship .reveal in static
     HTML without that JS path, or content would stay hidden when
     JS is unavailable. */

:root{
  /* Brand anchors (unchanged from main.css) */
  --navy:#0B1220;
  --teal:#20C9C0;
  --blue:#0E5BD6;

  /* Contract token names — values identical to main.css where they
     overlap, so layering this file changes no existing rendering
     except where this file deliberately refines a class below. */
  --ink:#0B1220;
  --muted:#5B6472;
  --paper:#FFFFFF;
  --line:#E5E7EB;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(11,18,32,.06);
  --shadow-md:0 8px 24px rgba(11,18,32,.08);
  --shadow-lg:0 16px 40px rgba(11,18,32,.14);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-fast:150ms;
  --dur-normal:300ms;
  --dur-slow:500ms;

  /* Supporting tokens (same palette family as main.css) */
  --blue-dark:#0A4BB3;
  --blue-pressed:#060B18;
  --blue-soft:#EEF4FF;
  --blue-tint:#DCE8FC;
  --teal-soft:#E6F7F6;
  --teal-ink:#0B3B38;
  --muted-dark:#374151;
  --bg:#F2F4F7;
  --line-strong:#CBD2DC;
  --on-dark:#FFFFFF;
  --on-dark-muted:#D7DEE8;
  --on-dark-faint:#C7CDD6;

  /* Type + font */
  --font-sans:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --text-xs:13px;
  --text-sm:14px;
  --text-base:16px;
  --text-lg:18px;
  --text-xl:20px;
  --text-2xl:clamp(26px,3.2vw,34px);
  --text-3xl:clamp(36px,5.2vw,58px);

  /* Spacing scale (8px base, with 4px step) */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-section:72px;
  --space-section-sm:48px;

  /* Focus */
  --focus-outline:3px solid var(--blue);
  --focus-offset:3px;
}

/* ------------------------------------------------------------------
   Type scale utilities (mirror the existing h1/h2 sizes; these do
   NOT restyle h1/h2/h3 globally — they are opt-in for other agents)
   ------------------------------------------------------------------ */
.text-xs{font-size:var(--text-xs)}
.text-sm{font-size:var(--text-sm)}
.text-base{font-size:var(--text-base)}
.text-lg{font-size:var(--text-lg);line-height:1.6}
.text-xl{font-size:var(--text-xl);line-height:1.6}
.text-2xl{font-size:var(--text-2xl);line-height:1.18;letter-spacing:-.015em}
.text-3xl{font-size:var(--text-3xl);line-height:1.06;letter-spacing:-.025em}
.text-lead{font-size:var(--text-xl);line-height:1.6}
.text-balance{text-wrap:balance}
.measure{max-width:68ch}

/* Text colours — each pair verified, see REPORT.md */
.text-ink{color:var(--ink)}
.text-muted{color:var(--muted)}
.text-blue{color:var(--blue)}
.text-teal-ink{color:var(--teal-ink)}
.text-on-dark{color:var(--on-dark)}
.text-on-dark-muted{color:var(--on-dark-muted)}

/* ------------------------------------------------------------------
   Eyebrow / label
   FIX included: main.css colours .eyebrow teal everywhere, but teal
   on white is 2.06:1 (fails AA) and industries.html uses .eyebrow on
   light sections ("First focus", "Back-office audience"). The
   default is therefore blue (6.02:1 on white); teal is restored
   only where the background is navy, where it is 9.07:1.
   ------------------------------------------------------------------ */
.eyebrow{color:var(--blue)}
.hero .eyebrow{color:var(--teal)}
.ds-section--dark .eyebrow{color:var(--teal)}
.ds-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--navy);margin:0 0 var(--space-3)}
.ds-label--muted{color:var(--muted-dark)}

/* ------------------------------------------------------------------
   Buttons — primary / ghost / secondary.
   Every state keeps the same border width, padding and font size;
   only colour, background, border-colour, shadow and transform move.
   All three keep the 48px minimum height (44px for .btn--sm) so
   touch targets never shrink. Focus uses the existing 3px outline;
   on navy backgrounds the ring is white (18.72:1) because a blue
   ring on navy would be only 3.11:1.
   ------------------------------------------------------------------ */
.btn{
  transition:background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.btn:focus-visible{outline:var(--focus-outline);outline-offset:var(--focus-offset)}
.btn:active{transform:translateY(1px);background:var(--blue-pressed);box-shadow:none}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.hero .btn:focus-visible{outline-color:#fff}
.ds-section--dark .btn:focus-visible{outline-color:#fff}

/* Ghost: white fill, navy border, navy text (as in main.css). */
.btn.ghost:focus-visible{outline:var(--focus-outline);outline-offset:var(--focus-offset)}
.btn.ghost:hover{background:var(--bg);border-color:var(--navy);box-shadow:var(--shadow-sm)}
.btn.ghost:active{background:var(--bg);border-color:var(--navy);transform:translateY(1px);box-shadow:none}

/* Secondary: soft blue fill, blue text, transparent border so it
   aligns in height with .btn.ghost when placed beside it. */
.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:13px 22px;border-radius:10px;
  background:var(--blue-soft);color:var(--blue);border:2px solid transparent;
  text-decoration:none;font-weight:700;font-size:16px;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.btn-secondary:hover{background:var(--blue-tint);box-shadow:var(--shadow-sm)}
.btn-secondary:active{background:var(--blue-tint);transform:translateY(1px);box-shadow:none}
.btn-secondary:focus-visible{outline:var(--focus-outline);outline-offset:var(--focus-offset)}
.btn-secondary:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* Sizes */
.btn--sm{min-height:44px;padding:10px 16px;font-size:15px}
.btn--block{width:100%}

/* ------------------------------------------------------------------
   Cards — base .card keeps main.css look; this layer adds the lift
   (transform only, no layout shift) and four opt-in variants.
   ------------------------------------------------------------------ */
.card{
  transition:box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.card:hover{transform:translateY(-2px)}
.card--flat{box-shadow:none}
.card--flat:hover{box-shadow:none;border-color:var(--line-strong);transform:none}
.card--tint{background:var(--blue-soft);border-color:var(--blue-tint)}
.card--accent{box-shadow:inset 0 4px 0 var(--teal),var(--shadow-sm)}
.card--accent:hover{box-shadow:inset 0 4px 0 var(--teal),var(--shadow-md)}
.card--dark{background:var(--navy);border-color:rgba(255,255,255,.2);color:#fff}
.card--dark .small{color:var(--on-dark-muted)}
.card--dark a{color:#fff}
.card--interactive:focus-within{box-shadow:0 0 0 3px rgba(14,91,214,.25),var(--shadow-md)}

/* ------------------------------------------------------------------
   Section rhythm — opt-in classes; the base `section` padding from
   main.css is deliberately NOT overridden, so no existing page
   reflows when this file is linked. Agents apply these classes
   where a new rhythm is wanted.
   ------------------------------------------------------------------ */
.ds-section{padding:var(--space-section) 0}
.ds-section--compact{padding:var(--space-section-sm) 0}
.ds-section--spacious{padding:96px 0}
.ds-section--alt{background:var(--bg)}
.ds-section--dark{background:var(--navy);color:#fff}
.ds-section--dark .small{color:var(--on-dark-muted)}
.ds-section--dark a{color:#fff}
.ds-section-head{max-width:760px}
.ds-stack{display:flex;flex-direction:column;gap:var(--space-4)}
.ds-cluster{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
@media(max-width:900px){
  .ds-section{padding:56px 0}
  .ds-section--spacious{padding:72px 0}
  .ds-section--compact{padding:40px 0}
}
@media(max-width:640px){
  .ds-section{padding:var(--space-section-sm) 0}
  .ds-section--spacious{padding:56px 0}
  .ds-section--compact{padding:32px 0}
}

/* ------------------------------------------------------------------
   Dividers
   ------------------------------------------------------------------ */
.divider{height:1px;border:0;background:var(--line);margin:var(--space-8) 0}
.divider--accent{width:56px;height:4px;background:var(--teal);border-radius:2px}
.divider--dark{background:rgba(255,255,255,.2)}

/* ------------------------------------------------------------------
   Surfaces / elevation (opt-in; no text-colour change implied)
   ------------------------------------------------------------------ */
.ds-surface{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md)}
.ds-surface--tint{background:var(--blue-soft);border-color:var(--blue-tint)}
.ds-elevated{box-shadow:var(--shadow-md)}
.ds-elevated-lg{box-shadow:var(--shadow-lg)}

/* ------------------------------------------------------------------
   Motion — shared contract classes. Hidden state is transform +
   opacity only (never layout). The JS agent adds .reveal with JS
   and observes it; without that JS path, pages must not carry
   .reveal in static HTML. Reduced motion shows everything fully.
   ------------------------------------------------------------------ */
.reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur-normal) var(--ease-out),transform var(--dur-normal) var(--ease-out)}
.reveal.is-visible{opacity:1;transform:none}
.reveal--fade{transform:none}
.reveal-delay-1{transition-delay:100ms}
.reveal-delay-2{transition-delay:200ms}
.reveal-delay-3{transition-delay:300ms}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .reveal-delay-1,.reveal-delay-2,.reveal-delay-3{transition-delay:0ms}
  .card:hover{transform:none}
  .btn:active,.btn-secondary:active{transform:none}
}