/* ═══════════════════════════════════════════════════════════════════════
   Design tokens — the single place the design is described in code.
   ───────────────────────────────────────────────────────────────────────
   Handwritten CSS, no framework (D17). Every colour, font, size and space
   used anywhere on the site resolves to a custom property declared here,
   so a design change is an edit to this file rather than a hunt through
   the stylesheets.

   Loaded FIRST, before grid.css and simplelaw.css, because the second half
   of this file maps these tokens onto gridlayout's --gl-* hooks. (Custom
   properties resolve at use time, so the order is not strictly required —
   but a reader should not have to know that to understand the <link> order
   in base.html.)

   ── Where these values came from ─────────────────────────────────────
   Sampled directly from the pixels of the home page design slices, not
   eyeballed: the dominant colours of Hero.png, What We Do.png, Why Org.png
   and Lower Box.png. Where the design supplies no value (anything below
   the colour section — the type scale, spacing, radii) the value here is a
   reasonable starting point and NOT from the design; it is marked [TBC]
   and should be checked against the source file when it arrives.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand colour ──────────────────────────────────────────────────
       Measured from the design. --brand-navy is the primary: headings,
       buttons, icons, the footer CTA band and the logo wordmark. */
    --colour-navy:        #2f418d;
    --colour-navy-dark:   #293b8a;  /* pressed / hover state for navy */
    --colour-navy-deep:   #000823;  /* the near-black in the hero photo */

    /* The pale blue everything sits on. Two values that read as one:
       --colour-surface is the page tint, --colour-card the cards on it.
       They are inverted between sections in the design (cards are pale on
       white in "What We Do"; the whole band is pale in "Why Org"), which
       is why both exist rather than one tint and white. */
    --colour-surface:     #f3f8fd;
    --colour-card:        #f3f8fd;
    --colour-white:       #ffffff;

    /* The periwinkle in the hero's angled shape, and the warm dot in the
       logo. Accent only — never behind body text. */
    --colour-accent:      #7a93ff;
    --colour-accent-warm: #fbab2a;

    /* ── Text ──────────────────────────────────────────────────────────
       ⚠ ACCESSIBILITY: the design's body grey sampled at ≈#7b8aa1, which
       measures about 3.3:1 against --colour-surface — below the 4.5:1
       WCAG AA minimum for body text. Sampling anti-aliased type understates
       it slightly, but not by 1.2 points.

       --colour-text-muted below is therefore DARKENED from the design to
       #5a6884, which measures ≈5.1:1 on --colour-surface and ≈5.8:1 on
       white. The design's original value is kept alongside it, commented,
       so the difference is visible and can be put back deliberately if
       the client accepts the risk rather than by someone not noticing.

       --colour-text-muted-as-designed: #7b8aa1;  <- fails AA, do not use */
    --colour-text:        #1f2a4d;
    --colour-text-muted:  #5a6884;
    --colour-text-invert: #ffffff;

    --colour-border:      #dbe6f4;

    /* ── Type ──────────────────────────────────────────────────────────
       PLACEHOLDER. The real webfont has not been supplied yet.

       The design's headings are a geometric sans with rounded terminals
       and a double-storey 'a' — the Gilroy / Sofia Pro family — but a
       raster cannot settle which, and the licence matters for web use.

       When the font files arrive:
         1. drop them in simplelaw/static/fonts/  (see the README there)
         2. uncomment the @font-face rules at the bottom of this file
         3. put the family name at the front of --font-heading/--font-body
       Nothing else in the codebase names a font, so that is the whole
       swap. Until then these resolve to the platform's own UI sans, which
       is metrically nothing like the design — the layout is correct, the
       lettering is not, and that is expected. */
    --font-heading: /* "Simple Law Display", */ system-ui, -apple-system,
                    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-body:    /* "Simple Law Text", */ system-ui, -apple-system,
                    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Weights named rather than numbered at the call site, so swapping in
       a family with a different weight range is one edit here. */
    --weight-normal:    400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;
    --weight-black:     800;

    /* Fluid type scale [TBC — not from the design].
       clamp() means there is no separate mobile font-size block to keep in
       sync: each size interpolates between its phone value and its desktop
       value across the viewport range. */
    --text-xs:   0.75rem;                              /* 12px  eyebrow   */
    --text-sm:   0.875rem;                             /* 14px  small     */
    --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --text-lg:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    --text-xl:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-2xl:  clamp(1.5rem, 1.3rem + 1vw, 2rem);    /* card titles     */
    --text-3xl:  clamp(1.875rem, 1.4rem + 2.4vw, 3rem);/* section heads   */
    --text-4xl:  clamp(2.25rem, 1.5rem + 3.6vw, 4rem); /* hero headline   */

    --leading-tight:  1.1;
    --leading-snug:   1.25;
    --leading-normal: 1.6;

    /* ── Space ─────────────────────────────────────────────────────────
       A 4px-based scale [TBC — not from the design]. --space-section is
       the vertical rhythm between page sections and is fluid, because a
       fixed 120px gap that looks right on a desktop is most of a phone
       screen. */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-7:  3rem;
    --space-8:  4rem;
    --space-section: clamp(3rem, 1.5rem + 6vw, 6rem);

    /* The page column. The design is drawn at 1930px wide with content
       inset roughly 40px, giving ~1850px. 1320px is used here instead:
       line lengths at 1850px are unreadable, and paragraphs are capped at
       68ch anyway, so the extra width goes to the layouts rather than to
       the prose. Measured back against the design rather than guessed —
       at 1200px the hero headline broke onto four lines where the design
       has two, and the "Who we work with" heading onto three where the
       design has two. [TBC — confirm against the source file, which will
       carry the real container width.] */
    --container:       1320px;
    --container-gutter: clamp(1rem, 4vw, 2.5rem);

    /* The wider measure a section can opt into (D64). Taken from the
       design, which is drawn on a 1930px canvas with its content inset
       about 40px each side — roughly 96% of the canvas, so the cards and
       the sector grid run much closer to the screen edge than the reading
       column does. 1760px is that proportion at a common desktop width,
       capped so the layout does not keep stretching on an ultrawide
       monitor.

       This is an *option*, not the default: --container above is
       unchanged, because how wide the site reads overall is a design
       decision rather than a per-section one. Say if the whole site
       should move to this width. */
    --container-wide:  1760px;

    /* ── Shape ─────────────────────────────────────────────────────────
       Measured off the design's cards and buttons by eye [TBC]. */
    --radius-sm:   8px;
    --radius-md:   16px;
    --radius-lg:   24px;
    /* The team portrait frames on the About page (D79), measured off that
       design at about 64px on a 1920px screen. */
    --radius-xl:   64px;
    --radius-pill: 999px;

    /* The sticky header's height, so a hero set to "Fill the screen" can end
       exactly at the bottom of the first screen (sections.css). Measured
       from the rendered header, border included — 73px below the desktop
       breakpoint, 89px above it (see the override after this block) — not
       taken from the design; update both if the header changes size. */
    --header-height: 4.5625rem;

    /* How big an uploaded social icon is drawn (D103), in the footer and
       on the team cards. [TBC] — the design slices give no measurable
       size (D57); 24px is the common size for social icons. */
    --social-icon-size: 24px;

    --shadow-card: 0 1px 2px rgba(31, 42, 77, 0.04),
                   0 8px 24px rgba(31, 42, 77, 0.06);

    /* How long a hover/focus transition takes. One value, so the whole
       site feels like one thing. */
    --transition: 150ms ease;
}

/* ═══════════════════════════════════════════════════════════════════════
   Skinning the grid
   ───────────────────────────────────────────────────────────────────────
   gridlayout ships no palette of its own — by design. Its grid.css writes
   every colour as a --gl-* custom property whose fallback is a non-colour
   keyword (`transparent`, `currentColor`, `none`), so until a project maps
   its tokens onto them the appearance controls render as plain boxes.

   This block is that mapping, and it is the reason an editor choosing
   "Background: primary" in the layout canvas gets navy rather than
   nothing. The vendored app is never edited to add it (D50) — the hooks
   exist precisely so the mapping lives here.

   Note: gridlayout's own grid.css comment says this mapping "belongs in
   core/static/css/core.css". That path is KASE's convention and does not
   exist in this repo; base.html already links `css/simplelaw.css`, so the
   mapping is here instead. Flagged rather than silently diverged — say if
   you would rather follow the vendored comment and I will move it.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* Backgrounds an editor can pick in the canvas. The pairings are fixed
       here rather than free-typed in the admin precisely so that no editor
       can produce a combination that fails contrast. */
    --gl-bg-tint:      var(--colour-surface);
    --gl-bg-primary:   var(--colour-navy);
    --gl-on-primary:   var(--colour-text-invert);
    --gl-bg-secondary: var(--colour-white);
    --gl-on-secondary: var(--colour-text);
    --gl-bg-accent:    var(--colour-accent);
    --gl-bg-dark:      var(--colour-navy-deep);
    --gl-on-dark:      var(--colour-text-invert);

    /* The scrim laid over an editor-chosen background photograph. Opaque
       enough to hold 4.5:1 for white text over the lightest photo an
       editor might upload — which is unknowable here, hence the strength. */
    --gl-bg-scrim:     rgba(0, 8, 35, 0.55);
    --gl-on-image:     var(--colour-text-invert);

    --gl-radius:       var(--radius-lg);
    --gl-border:       var(--colour-border);
    --gl-panel-bg:     var(--colour-white);
    --gl-panel-shadow: var(--shadow-card);

    --gl-pad-sm:       var(--space-3);
    --gl-pad-md:       var(--space-5);
    --gl-pad-lg:       var(--space-7);

    /* The gap between placed sections. The design stacks full-width bands
       with no visible gutter between them, so this is deliberately tighter
       than gridlayout's 1.5rem default. */
    --gl-gap:          var(--space-4);
}

/* ═══════════════════════════════════════════════════════════════════════
   Webfonts — placeholder
   ───────────────────────────────────────────────────────────────────────
   The @font-face rules that belong here are NOT here, and that is not an
   oversight. They live in simplelaw/static/fonts/README.md, ready to be
   pasted back in when the font files arrive.

   Why they cannot sit here commented out, which is where they were:

   WhiteNoise's CompressedManifestStaticFilesStorage (D18) rewrites every
   CSS URL reference in every stylesheet to its hashed name at
   collectstatic time, and the regex it uses does not skip CSS comments.
   A commented rule pointing at a font that does not exist yet (D58) is
   therefore still resolved, still missing, and raises MissingFileError —
   which aborts collectstatic, which aborts the container's entrypoint
   before gunicorn is ever reached.

   Note the same trap applies to this comment: writing the CSS function
   name followed by a bracket, even in prose, is enough for the regex to
   match and try to resolve whatever is inside it. That is why this note
   describes the syntax instead of quoting it. The real rules are in the
   README, where Markdown makes them inert.

   That was a production-only failure: development serves static straight
   from the app directories and never runs this backend, so the file was
   fine for weeks and the site simply would not boot on the server.

   `font-display: swap` renders in the fallback immediately and swaps when
   the webfont lands, rather than holding the page blank; `unicode-range`
   is omitted because the site is English-only at launch (D43) and adding
   it wrongly hides glyphs. Both notes are repeated in the README beside
   the rules they describe.
   ═══════════════════════════════════════════════════════════════════════ */

/* The header grows at the desktop breakpoint (simplelaw.css), so the
   token that tracks it does too. */
@media (min-width: 1025px) {
    :root {
        --header-height: 5.5625rem;
    }
}