/* BJ-Containers design tokens.
   Colours sampled by opaque-pixel census from the two supplied 2000x2000 PNG
   originals. Contrast ratios below are measured, not assumed — see
   docs/DESIGN.md and docs/DECISIONS.md D4. */

:root {
  /* ---- brand ---------------------------------------------------------- */
  --bjc-navy: #01204E;          /* 52% of logo · 15.93:1 on white  (AAA) */
  --bjc-teal: #028391;          /* 33% of logo ·  4.51:1 on white  (AA, marks only) */
  --bjc-teal-text: #01636D;     /* derived     ·  6.98:1 on white  (AA comfortable) */
  --bjc-white: #FFFFFF;
  --bjc-neutral: #F4F7F8;       /* pale blue-grey — quiet backgrounds, table stripes */

  /* Teal at 4.51:1 clears AA on white by 0.01 and FAILS at 4.19:1 on
     --bjc-neutral. Use --bjc-teal for fills, rules, arrows and icons (3:1
     non-text threshold); use --bjc-teal-text for any teal text or link. */

  /* Supporting surfaces, per the art direction: warm white for editorial
     sections, pale blue-grey for technical ones, graphite for dark accents
     that are not the brand navy. */
  --bjc-warm: #FBFAF7;
  --bjc-blue-grey: #EEF3F5;
  --bjc-graphite: #2B3238;
  --bjc-navy-deep: #011639;     /* the navy one step down, for the project section */

  --bjc-navy-90: #12305C;
  --bjc-navy-70: #3C536F;
  --bjc-ink: #0E1A24;
  --bjc-ink-muted: #3A4A52;     /*  9.0:1 on white — secondary copy */
  --bjc-line: #D4DDE0;
  --bjc-line-strong: #BFC9CC;
  --bjc-on-navy-muted: rgba(255, 255, 255, 0.78);
  --bjc-teal-bright: #4CC3D0;   /* teal lifted for use ON navy: 7.6:1 on #01204E */

  /* ---- state ---------------------------------------------------------- */
  --bjc-success: #0F6B3F;
  --bjc-warning: #8A5A00;
  --bjc-error: #A3231C;         /*  6.4:1 on white */
  --bjc-error-bg: #FDF3F2;
  --bjc-focus: var(--bjc-teal);

  /* ---- typography ----------------------------------------------------- */
  /* Three self-hosted faces (assets/fonts, SIL OFL 1.1 — see LICENSE.txt):
       display  Bricolage Grotesque — headlines, variable weight + optical size
       body     IBM Plex Sans       — copy, forms, navigation
       mono     IBM Plex Mono       — SKUs, dimensions, technical labels
     Each stack ends in the system fonts, so the page is readable before the
     woff2 arrives and stays readable if it never does. */
  --bjc-font-display: "Bricolage Grotesque", "IBM Plex Sans", -apple-system,
                      BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --bjc-font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                   Roboto, "Helvetica Neue", Arial, sans-serif;
  --bjc-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bjc-text-xs: 0.8125rem;
  --bjc-text-sm: 0.9375rem;
  --bjc-text-base: 1rem;
  --bjc-text-lg: 1.125rem;
  --bjc-text-xl: 1.375rem;
  --bjc-text-2xl: 1.75rem;
  --bjc-text-3xl: 2.25rem;
  --bjc-text-4xl: 2.75rem;

  /* Fluid display sizes. The clamp keeps a headline on two lines from 360px
     to 1440px without a breakpoint per size. */
  --bjc-display-1: clamp(2.5rem, 1.1rem + 4.6vw, 5.25rem);   /* hero */
  --bjc-display-2: clamp(1.85rem, 1.15rem + 2vw, 3rem);      /* section H2 */
  --bjc-display-3: clamp(1.35rem, 1.05rem + 1vw, 1.9rem);    /* panel titles */

  --bjc-leading-tight: 1.2;
  --bjc-leading-display: 1.02;
  --bjc-leading-snug: 1.35;
  --bjc-leading: 1.6;

  --bjc-weight-normal: 400;
  --bjc-weight-medium: 500;
  --bjc-weight-semibold: 600;
  --bjc-weight-bold: 700;
  --bjc-weight-display: 640;

  --bjc-tracking-display: -0.022em;
  --bjc-tracking-label: 0.08em;

  /* ---- space (4px base) ----------------------------------------------- */
  --bjc-1: 0.25rem;  --bjc-2: 0.5rem;   --bjc-3: 0.75rem;  --bjc-4: 1rem;
  --bjc-5: 1.5rem;   --bjc-6: 2rem;     --bjc-7: 3rem;     --bjc-8: 4rem;
  --bjc-9: 6rem;     --bjc-10: 8rem;

  /* ---- layout --------------------------------------------------------- */
  --bjc-measure: 68ch;          /* readable line length for body copy */
  --bjc-container: 1200px;
  --bjc-container-wide: 1440px;
  --bjc-gutter: 1rem;           /* 16px side gutter at phone width */

  --bjc-radius: 4px;
  --bjc-radius-lg: 8px;
  --bjc-radius-xl: 14px;

  --bjc-shadow-sm: 0 1px 2px rgba(1, 32, 78, 0.08);
  --bjc-shadow: 0 2px 8px rgba(1, 32, 78, 0.10);
  --bjc-shadow-lg: 0 8px 28px rgba(1, 32, 78, 0.16);
  --bjc-shadow-ground: 0 28px 40px -24px rgba(1, 32, 78, 0.45);

  /* ---- interaction ---------------------------------------------------- */
  --bjc-target: 44px;           /* minimum click target */
  --bjc-focus-width: 2px;
  --bjc-focus-offset: 2px;

  /* ---- motion --------------------------------------------------------- */
  /* One vocabulary for the whole site (docs/DESIGN.md → Motion):
       fast     feedback on a control            150–250 ms
       medium   a panel or state swap            300–400 ms
       section  an entrance as content arrives   400–700 ms
     Nothing essential exceeds --bjc-duration; the longer ones are for
     movement the page does not depend on. */
  --bjc-duration: 160ms;
  --bjc-dur-fast: 180ms;
  --bjc-dur-medium: 340ms;
  --bjc-dur-section: 560ms;
  --bjc-dur-mask: 720ms;
  --bjc-ease: cubic-bezier(0.2, 0, 0.2, 1);
  --bjc-ease-out: cubic-bezier(0.16, 0.84, 0.24, 1);
  --bjc-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --bjc-z-header: 100;
  --bjc-z-sticky: 200;
  --bjc-z-drawer: 900;
  --bjc-z-dialog: 1000;
}

@media (min-width: 768px) {
  :root { --bjc-gutter: 2rem; }
}

/* Reduced motion removes movement, never content: durations collapse to a
   frame, so every transition still completes and every end state is reached. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bjc-duration: 1ms;
    --bjc-dur-fast: 1ms;
    --bjc-dur-medium: 1ms;
    --bjc-dur-section: 1ms;
    --bjc-dur-mask: 1ms;
  }
}