/* keeganried.com — Design System "Precision" — v1
 * Design tokens as CSS custom properties.
 * Source of truth is Design System.dc.html; this file mirrors it for engineering.
 * All UI in the reference designs uses inline styles with these literal values.
 */

:root {
  /* ---- Color: neutrals ---- */
  --ink:            #171A1F;  /* text, headlines */
  --muted:          #525A64;  /* body, secondary text */
  --faint:          #8A9099;  /* labels, captions, mono metadata */
  --hairline:       rgba(23, 26, 31, 0.10); /* borders, dividers */

  /* ---- Color: surfaces ---- */
  --canvas:         #F6F8FA;  /* page background */
  --surface:        #FFFFFF;  /* cards, panels */
  --panel-tint:     #EAEEF3;  /* image insets, diagram backdrops */
  --ink-panel:      #1C2026;  /* inverted (dark) band background */
  --ink-panel-card: #2A2F37;  /* card on the dark band */
  --terminal:       #12151A;  /* code/terminal card on dark band */

  /* ---- Color: accent (action & links only, never decoration) ---- */
  --accent:         #3B6FC9;
  --accent-hover:   #2C58A8;
  --accent-on-dark: #7FA3DB;  /* accent/eyebrow on the dark band */

  /* ---- Color: on-dark text ---- */
  --on-dark:        #EDF0F4;
  --on-dark-muted:  #B7BEC8;

  /* ---- Color: semantic (status) ---- */
  --status-ok-bg:   #E4F3EA;  --status-ok-fg:   #1F8A5B;
  --status-warn-bg: #FBEFD8;  --status-warn-fg: #B0762A;
  --status-idle-bg: #EEF1F4;  --status-idle-fg: #8A9099;

  /* ---- Typography ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* type scale — size / weight / tracking (line-heights noted in comments) */
  --t-display:   700; /* 76px, -0.035em, lh 1.0  (600–700 weight) */
  --t-h1:        600; /* 56px, -0.03em,  lh 1.05 */
  --t-h2:        600; /* 40px, -0.025em, lh 1.08 */
  --t-h3:        600; /* 26px, -0.02em */
  --t-lead:      400; /* 22px, lh 1.5,   muted */
  --t-body:      400; /* 18px, lh 1.55,  muted */
  --t-small:     400; /* 15px, lh 1.55 */
  --t-stat:      600; /* 46px, -0.03em */
  /* mono label: 12px / 500 / 0.10em uppercase, faint or accent */

  /* ---- Radii ---- */
  --r-sm:  8px;
  --r-md:  11px;
  --r-lg:  14px;
  --r-xl:  18px;
  --r-pill: 100px;

  /* ---- Layout ---- */
  --content-max: 1180px;   /* case-study / home content width */
  --doc-max:     1080px;   /* documentation-style pages */
  --gutter:      40px;
  --label-rail:  160px;    /* left mono-label column in section grids */

  /* ---- Elevation ---- */
  --shadow-card: 0 1px 3px rgba(23, 26, 31, 0.12);
  --shadow-float: 0 30px 70px -34px rgba(20, 26, 34, 0.40);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-dur: 0.7s;   /* scroll-reveal fade+rise (translateY 18px -> 0) */
  --hover-dur: 0.2s;    /* color / shadow transitions */
}

/* Placeholder pattern used for image slots awaiting real screenshots:
   background-image: repeating-linear-gradient(135deg,#DFE5EC 0 15px,#D5DCE5 15px 30px);
   caption in --font-mono, --faint. */