/* ============================================================================
   ContinuousLogic.ai: Foundations: Color + Type

   PORTED FROM the Claude Design project "ContinuousLogic Design System"
   (`colors_and_type.css`). Keep in sync with that file; it is the source of
   truth. The only intentional divergence: the design system self-hosts IBM
   Plex Sans from uploaded variable TTFs, which would mean committing ~30 font
   files to this repo. Here all three Plex families come from Google Fonts,
   loaded once per page, restricted to the two permitted weights (400 / 500).

   Register: research working paper, not consumer SaaS UI.
   ============================================================================ */

/* IBM Plex Sans (text) · IBM Plex Mono (metadata, stage numbers, code)
   · IBM Plex Serif (pull-quotes only). Weights limited to 400 and 500. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500&family=IBM+Plex+Serif:wght@400&display=swap');

:root {
  color-scheme: light;

  /* ---- Core palette (verbatim from brand brief) ---------------------------- */
  --gov-navy:      #0F2A47;  /* Primary. Titles, stage numbers, footer, brand surface */
  --signal-blue:   #1E5BAC;  /* Brand accent. Arrows, callouts, emphasis, CTA moments */
  --clarity-sky:   #A8C5E8;  /* Light accent / tint. Pull-quote bg, gentle highlights  */
  --verified-teal: #0F8A7F;  /* Confirmed state. "Working model", success, the non-green green */

  --paper:    #F7F8FA;       /* Primary surface. Background of everything */
  --card:     #FFFFFF;       /* Secondary surface. Raised cards only */
  --deep-ink: #1A2535;       /* Body text, headings, labels */
  --slate:    #5A6B82;       /* Muted text, subtitles, the "broken model" path */
  --hairline: #D4DCE6;       /* Dividers, dotted leaders, panel borders */

  /* ---- Derived tints (mix-based, stay on-palette) -------------------------- */
  --sky-wash:    color-mix(in srgb, var(--clarity-sky) 28%, var(--paper));  /* pull-quote fill */
  --sky-wash-2:  color-mix(in srgb, var(--clarity-sky) 16%, var(--paper));  /* faint highlight  */
  --navy-wash:   color-mix(in srgb, var(--gov-navy) 6%, var(--paper));      /* navy panel tint  */
  --teal-wash:   color-mix(in srgb, var(--verified-teal) 12%, var(--paper));/* working-model tint */
  --navy-hover:  color-mix(in srgb, var(--gov-navy) 88%, black);            /* pressed/hover navy */
  --signal-hover:color-mix(in srgb, var(--signal-blue) 88%, black);         /* pressed/hover blue */

  /* ---- Semantic foreground / surface aliases ------------------------------- */
  --fg1: var(--deep-ink);
  --fg2: var(--slate);
  --fg-brand: var(--gov-navy);
  --fg-accent: var(--signal-blue);
  --bg1: var(--paper);
  --bg2: var(--card);
  --border: var(--hairline);

  /* ---- Type families ------------------------------------------------------- */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;  /* pull-quotes only */
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ---- Weights (only two, ever) -------------------------------------------- */
  --w-regular: 400;
  --w-medium:  500;

  /* ---- Type scale (rem; 1rem = 16px). Tuned for documentation density ------ */
  --fs-display: 2.5rem;   /* 40px */
  --fs-h1:      2rem;     /* 32px */
  --fs-h2:      1.375rem; /* 22px */
  --fs-h3:      1.125rem; /* 18px */
  --fs-label:   1rem;     /* 16px */
  --fs-body:    0.9375rem;/* 15px */
  --fs-small:   0.8125rem;/* 13px */
  --fs-meta:    0.6875rem;/* 11px */
  --fs-legal:   0.625rem; /* 10px */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.55;

  /* Metadata letter-spacing. The ONLY place tracking is added. */
  --track-meta: 0.08em;

  /* ---- Spacing scale (4px base) -------------------------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;  --sp-9: 96px;

  /* ---- Radii (restrained; documentation, not app chrome) ------------------- */
  --r-sm: 3px;   --r-md: 5px;   --r-lg: 8px;   --r-pill: 999px;

  /* ---- Borders ------------------------------------------------------------- */
  --bw-hair: 1px;
  --bw-rule: 2px;

  /* No shadow system. The brand is flat. Elevation is expressed with hairline
     borders and surface color (Paper vs Card), never with shadow or glow. */
  --elevation: none;
}

/* ---- Metadata label: mono, tracked. ---------------------------------------- */
.cl-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: var(--w-regular);
  letter-spacing: var(--track-meta);
  color: var(--fg2);
}

/* ---- Pull-quote: IBM Plex Serif Regular on a Clarity Sky tint. --------------
   Serif is reserved for pull-quotes; it is the one place the serif appears. */
.cl-pullquote {
  font-family: var(--font-serif);
  font-weight: var(--w-regular);
  background: var(--sky-wash);
  color: var(--fg1);
  font-size: 0.875rem;
  line-height: var(--lh-snug);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
}

/* ---- Inline code / monospace literal. --------------------------------------- */
.cl-code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--gov-navy);
  background: var(--navy-wash);
  padding: 0.1em 0.4em;
  border-radius: var(--r-sm);
}

/* ---- Shared accessibility utilities ----------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -3rem;
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--card);
  border: 1px solid var(--signal-blue);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--w-medium);
  color: var(--gov-navy);
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: var(--sp-4); }

:focus-visible {
  outline: 2px solid var(--signal-blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Motion is minimal by system rule; honour the OS preference regardless. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}