/* =============================================================================
   security-bits design tokens  —  §3 of STYLE_GUIDE.md
   -----------------------------------------------------------------------------
   THIS FILE IS SHARED VERBATIM between the Hugo and Django projects.
   It is what makes them look identical. Copy it, do not fork it.

   MAIN BRAND COLOUR:  #fa530a  (--accent)
     Links, inline code, heading underlines, rules, vlines, fills. The one colour
     the site is recognised by. Never substituted, re-tinted, or "corrected for
     contrast" — see §8 of STYLE_GUIDE.md for the measurements and the
     non-colour mitigations that go with it. Identical in light and dark.

   Other brand fixed points (not negotiable):
     light  background #f7f7f7   headings #404040   text #111111
     dark   background #404040   text     #f7f7f7
   ============================================================================= */

:root {
  color-scheme: light dark;

  /* Neutral ramp */
  --c-grey-0:#ffffff; --c-grey-25:#f8f8f8; --c-grey-50:#f7f7f7; --c-grey-75:#f5f5f5;
  --c-grey-100:#eaeaea; --c-grey-150:#dfdfdf; --c-grey-200:#d6d6d6;
  --c-grey-300:#b0b0b0; --c-grey-400:#8a8a8a; --c-grey-500:#6b6b6b; --c-grey-600:#525252;
  --c-grey-700:#404040; --c-grey-800:#262626; --c-grey-900:#111111;

  /* Highlight ramp */
  --c-orange-50:#fff4ed; --c-orange-100:#ffe0cc; --c-orange-200:#ffc2a0;
  --c-orange-500:#fa530a; --c-orange-600:#d94404; --c-orange-700:#b83b05; --c-orange-800:#8f2e04;

  /* Semantic roles */
  --bg:var(--c-grey-50);
  --surface:var(--c-grey-0);
  --bg-alt:var(--c-grey-25);
  --bg-hover:var(--c-grey-75);
  --bg-muted:var(--c-grey-100);
  --bg-inset:var(--c-grey-100);

  --fg:var(--c-grey-900);
  --fg-heading:var(--c-grey-700);
  --fg-muted:var(--c-grey-600);
  --fg-subtle:var(--c-grey-500);
  --fg-on-accent:var(--c-grey-900);

  --border:var(--c-grey-100);
  --border-strong:var(--c-grey-200);
  --border-control:var(--c-grey-400);

  --accent:var(--c-orange-500);      /* THE BRAND COLOUR */
  --accent-hover:var(--c-orange-600);
  --accent-bg:#fff4ed;
  --accent-border:var(--c-orange-200);

  --success:#16704a; --success-bg:#eef7f2;
  --warning:#8a4b00; --warning-bg:#fdf5e8;
  --danger:#b3261e;  --danger-bg:#fdf0ef;
  --info:#0b5c9c;    --info-bg:#eef4fa;

  --focus-ring:var(--c-orange-500);   /* the brand colour */
  --focus-halo:var(--c-grey-0);       /* inner separator */
  --focus-edge:var(--c-grey-900);     /* outer edge */

  /* Typography — system faces only, no webfonts, no external includes */
  --font-serif:Georgia,"Times New Roman",Times,serif;
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono","Courier New",monospace;

  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.25rem; --text-4xl:3rem;

  --leading-tight:1.2; --leading-snug:1.4; --leading-normal:1.6;
  --weight-normal:400; --weight-medium:500; --weight-semibold:600;
  --weight-bold:700; --weight-heading:800;
  --tracking-tight:-.02em; --tracking-wide:.04em;

  /* Space / shape / motion */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem;
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-full:9999px;
  --shadow-sm:0 1px 2px rgb(17 17 17 / .06);
  --shadow-md:0 2px 8px rgb(17 17 17 / .08);
  --shadow-lg:0 12px 32px rgb(17 17 17 / .14);
  --width-prose:68ch; --width-content:72rem; --width-narrow:40rem;
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
  --ease:cubic-bezier(.2,0,.2,1);
}

/* Dark — background #404040, text #f7f7f7. Surfaces go DARKER, not lighter. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#404040; --surface:#363636; --bg-alt:#3b3b3b; --bg-hover:#414141;
    --bg-muted:#4a4a4a; --bg-inset:#2e2e2e;
    --fg:#f7f7f7; --fg-heading:#ffffff; --fg-muted:#d6d6d6; --fg-subtle:#bdbdbd;
    --fg-on-accent:#111111;
    --border:#4a4a4a; --border-strong:#6b6b6b; --border-control:#a8a8a8;
    --accent:#fa530a; --accent-hover:#ff7a3d; --accent-bg:#3a2012; --accent-border:#8f4a22;
    --success:#8fe0b4; --success-bg:#2c4238;
    --warning:#f7cf6b; --warning-bg:#47402a;
    --danger:#ffaaa4;  --danger-bg:#4a3230;
    --info:#94d1ff;    --info-bg:#2e3f4d;
    --focus-ring:#fa530a;
    --focus-halo:#1e1e1e;
    --focus-edge:#f7f7f7;
    --shadow-sm:0 1px 2px rgb(0 0 0 / .45);
    --shadow-md:0 2px 8px rgb(0 0 0 / .55);
    --shadow-lg:0 12px 32px rgb(0 0 0 / .65);
  }
}
:root[data-theme="dark"] {
  --bg:#404040; --surface:#363636; --bg-alt:#3b3b3b; --bg-hover:#414141;
    --bg-muted:#4a4a4a; --bg-inset:#2e2e2e;
  --fg:#f7f7f7; --fg-heading:#ffffff; --fg-muted:#d6d6d6; --fg-subtle:#bdbdbd;
  --fg-on-accent:#111111;
  --border:#4a4a4a; --border-strong:#6b6b6b; --border-control:#a8a8a8;
  --accent:#fa530a; --accent-hover:#ff7a3d; --accent-bg:#3a2012; --accent-border:#8f4a22;
  --success:#8fe0b4; --success-bg:#2c4238;
  --warning:#f7cf6b; --warning-bg:#47402a;
  --danger:#ffaaa4;  --danger-bg:#4a3230;
  --info:#94d1ff;    --info-bg:#2e3f4d;
  --focus-ring:#fa530a;
  --focus-halo:#1e1e1e;
  --focus-edge:#f7f7f7;
  --shadow-sm:0 1px 2px rgb(0 0 0 / .45);
  --shadow-md:0 2px 8px rgb(0 0 0 / .55);
  --shadow-lg:0 12px 32px rgb(0 0 0 / .65);
}