/* Gantry · tokens.css
   The digitalise.agency design system, applied to Gantry. Values mirror the
   token sheet of the main website redesign (site/src/styles/tokens.css in the
   Digitalise Agency repo): same surfaces, same ink ramp, same brand blue.
   The pre-redesign variable names are kept below as aliases so every selector
   in the other sheets (and the classes the JS emits) keeps resolving. */

/* ============================ THEME ============================ */
  :root{
    /* Digitalise Agency tokens */
    --surface-0:#05070d;          /* page background */
    --surface-1:#0d1220;          /* cards */
    --surface-2:#151c2e;          /* raised, hover, inputs */
    --ink-1:#f4f7fc;              /* headings, primary text */
    --ink-2:#c3ccdd;              /* body text */
    --ink-3:#93a0b8;              /* muted, captions */
    --accent:#1967ff;             /* brand blue: the one primary accent */
    --accent-hover:#3f82ff;
    --accent-ink:#ffffff;
    --accent-2:#ff6719;           /* brand orange: scarce secondary accent */
    --focus:#6aa1ff;
    --font-display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
    --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --dur-1:140ms;
    --dur-2:240ms;
    --ease:cubic-bezier(.22,1,.36,1);

    /* Legacy names, aliased. Do not remove: the six sheets and the DOM the
       JS builds still reference these. */
    --bg-0:var(--surface-0);
    --bg-1:#090d17;               /* input wells, one step above the page */
    --bg-2:var(--surface-2);
    --card:var(--surface-1);
    --card-2:var(--surface-2);
    --border:#222b40;
    --border-soft:#1a2233;
    --text:var(--ink-1);
    --text-dim:var(--ink-2);
    --text-faint:var(--ink-3);
    --violet:var(--accent);
    --violet-2:var(--accent-hover);
    --indigo:var(--accent-hover);
    --cyan:var(--accent-2);

    /* Semantic status colors (kept: conventional, readable on these surfaces). */
    --green:#34d399;
    --green-dim:#0c2b22;
    --red:#fb7185;
    --red-dim:#2d1420;
    --amber:#fbbf24;

    --shadow:0 8px 30px rgba(0,0,0,.35);
    --radius:16px;
    --radius-sm:10px;
    --maxw:1320px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{color-scheme:dark}
  body{
    font-family:var(--font-body);
    background:var(--surface-0);
    color:var(--text);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    line-height:1.5;
  }
  h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-0.01em}
  a{color:var(--accent-hover)}
  ::selection{background:rgba(25,103,255,.35)}

  /* Safety net: an inline SVG whose own rules forgot a size must never expand
     past its container. Sized icons all set explicit widths and are unaffected. */
  svg{max-width:100%}

  /* One focus style everywhere (Digitalise Agency house rule). */
  :focus-visible{outline:3px solid var(--focus);outline-offset:2px}

  /* Reduced motion: kill every animation and transition. */
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{
      animation-duration:.001ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.001ms !important;
    }
  }