/* =========================================================================
   RovoMedia — colors_and_type.css
   Reusable token sheet for the RovoMedia design system ("scientific
   telemetry on warm paper"). Merged from the production bundle's
   tokens/{fonts,colors,typography,spacing,effects,base}.css — values are
   measured, not inferred. Link this file once; everything else layers on.
   ========================================================================= */

/* ---- Webfonts (preserved originals in assets/fonts/) ---- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-regular-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-medium-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-semibold-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-bold-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/Inter-Italic.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/InterDisplay-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/InterDisplay-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/InterDisplay-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/InterDisplay-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/InterDisplay-Black.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-regular-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-medium-500.woff2") format("woff2"); }

:root {
  /* ---- Base palette (source: tokens/colors.css, 2026-03 telemetry refresh — measured values) ---- */
  --rm-paper:            #f2f1ee;   /* warm off-white canvas */
  --rm-paper-2:          #ece8e1;   /* lower canvas / band fill */
  --rm-surface-elevated: #fbfaf7;   /* opaque raised surface */
  --rm-panel:            #ebe8e2;   /* alternate panel fill */
  --rm-white:            #ffffff;

  --rm-depth:            #243540;   /* deep slate-teal — headings, dark panels */
  --rm-depth-soft:       #4f5c66;   /* softened depth — mono labels, links */
  --rm-ink:              #121416;   /* near-black body text */
  --rm-ink-muted:        #5d666d;   /* muted body */
  --rm-ink-secondary:    #5e6770;   /* secondary text */
  --rm-hud:              #9b9994;   /* faint mono metadata */

  --rm-clay:             #d7d0c5;   /* primary border (warm) */
  --rm-clay-subtle:      #c7bfb4;   /* stronger / subtle border */

  --rm-accent:           #c5472b;   /* warm orange-red — the only chroma */
  --rm-accent-hover:     #9d3a23;   /* pressed / hover accent */
  --rm-on-accent:        #ffffff;
  --rm-accent-tint:      rgba(197, 71, 43, 0.12);
  --rm-brass:            #b6954e;   /* dim brass — telemetry markers / scan */

  /* ---- Semantic aliases (prefer these in components) ---- */
  --color-canvas:        var(--rm-paper);
  --color-canvas-low:    var(--rm-paper-2);
  --color-surface:       rgba(255, 255, 255, 0.76);  /* translucent card over canvas */
  --color-surface-solid: var(--rm-surface-elevated);
  --color-panel:         var(--rm-panel);
  --color-depth:         var(--rm-depth);
  --color-depth-soft:    var(--rm-depth-soft);

  --color-text:           var(--rm-ink);
  --color-text-muted:     var(--rm-ink-muted);
  --color-text-secondary: var(--rm-ink-secondary);
  --color-hud:            var(--rm-hud);
  --color-heading:        var(--rm-depth);

  --color-border:         var(--rm-clay);
  --color-border-subtle:  var(--rm-clay-subtle);
  --color-hairline:       rgba(36, 53, 64, 0.12);   /* depth-tinted thin rule */

  --color-accent:         var(--rm-accent);
  --color-accent-hover:   var(--rm-accent-hover);
  --color-on-accent:      var(--rm-on-accent);
  --color-accent-tint:    var(--rm-accent-tint);

  /* Dark-panel foreground (measured from source: text on slate depth panels) */
  --color-on-depth:        #f4f1eb;
  --color-on-depth-muted:  rgba(244, 241, 235, 0.84);
  --color-on-depth-faint:  rgba(244, 241, 235, 0.62);

  --color-focus: rgba(197, 71, 43, 0.35);  /* 3px outline, 2px offset */

  /* ---- Short alias tokens (Milestone 2a, additive) ----
     Same values as the raw and semantic token layers above, under the short
     names historically authored in home.css's own :root alias block and
     the homepage's inline <style> :root (index.html). Defining them here
     lets base.css and any future consumer read one canonical definition
     instead of each route re-deriving its own copy. --muted intentionally
     maps to --rm-ink-muted (not a new value) per the ExecPlan Decision
     Log: it resolves to the same #5d666d the homepage's inline block
     already hardcodes, closing the "--muted undefined on /about/,
     /work/, /services/" defect noted in PROVENANCE-MATRIX.md §2/§5. */
  --paper:   var(--rm-paper);
  --paper-2: var(--rm-paper-2);
  --surface: var(--rm-surface-elevated);
  --panel:   var(--rm-panel);
  --ink:     var(--rm-ink);
  --ink-muted: var(--rm-ink-muted);
  --muted:   var(--rm-ink-muted);
  --clay:    var(--rm-clay);
  --clay-str: var(--rm-clay-subtle);
  --signal:  var(--rm-accent);
  --signal-h: var(--rm-accent-hover);
  --signal-t: var(--rm-accent-tint);
  --depth:   var(--rm-depth);
  --depth-s: var(--rm-depth-soft);
  --on-depth: var(--color-on-depth);
  --on-depth-dim: var(--color-on-depth-faint);
  --display: var(--font-display);
  --body: var(--font-sans);
  --mono: var(--font-mono);

  /* ---- Typography (source: tokens/typography.css) ---- */
  --font-display: "Inter Display", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  --text-hero:  clamp(44px, 5vw, 74px);
  --text-h1:    clamp(36px, 4.5vw, 56px);
  --text-h2:    clamp(28px, 3.2vw, 38px);
  --text-h3:    clamp(20px, 2vw, 26px);
  --text-lead:  clamp(17px, 1.9vw, 20px);
  --text-body:  17px;
  --text-base:  15px;
  --text-sm:    13px;
  --text-label: 11px;   /* uppercase tracked eyebrow */
  --text-mono:  12px;   /* data / metadata */

  --leading-tight:  1.06;
  --leading-snug:   1.2;
  --leading-normal: 1.58;
  --leading-prose:  1.65;

  --tracking-hero:  -0.028em;
  --tracking-h2:    -0.03em;
  --tracking-h3:    -0.02em;
  --tracking-label: 0.14em;
  --tracking-data:  0.02em;

  /* ---- Spacing & layout (source: tokens/spacing.css) ---- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-xxl: 48px;
  --space-3xl: 72px;
  --section-gap: clamp(56px, 8vw, 88px);
  --container: 1160px;
  --container-prose: 74ch;
  --pad: clamp(16px, 2.6vw, 32px);
  --header-h: 56px;

  /* ---- Radius, border, shadow, motion (source: tokens/effects.css) ---- */
  --radius-xs:  4px;
  --radius-sm:  6px;    /* buttons (technical) */
  --radius-md:  10px;
  --radius-lg:  18px;
  --radius-xl:  24px;   /* large feature cards */
  --radius-pill: 999px;

  --border-hair: 1px;
  --border-strong: 1.5px;
  --border-rule: 2px;

  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(31, 35, 38, 0.04);
  --shadow-2: 0 18px 48px rgba(31, 35, 38, 0.12);
  --shadow-accent: 0 4px 12px rgba(197, 71, 43, 0.25);

  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-std: ease;
  --dur-fast: 0.15s;
  --dur-med: 0.2s;

  --grid-line-light: rgba(255, 255, 255, 0.08);   /* on dark/depth panels */
  --grid-line-dark:  rgba(31, 35, 38, 0.05);       /* on light panels */
  --grid-cell: 24px;
}

/* ---- Element defaults (source: tokens/base.css) ---- */
* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  line-height: var(--leading-normal);
  background-color: var(--color-canvas);
  background-image:
    radial-gradient(900px 620px at 14% -6%, rgba(36, 53, 64, 0.09), transparent 58%),
    radial-gradient(900px 640px at 100% 0%, rgba(97, 113, 125, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 28%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-heading);
  margin: 0;
}
h1 { font-size: var(--text-h1); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-hero); }
h2 { font-size: var(--text-h2); font-weight: var(--weight-semibold); line-height: 1.08; letter-spacing: var(--tracking-h2); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: 1.15; letter-spacing: var(--tracking-h3); }

p { margin: 0 0 16px 0; }

a { color: var(--color-text); text-decoration: none; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }

code, pre { font-family: var(--font-mono); font-synthesis: none; }

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
::selection { background: var(--color-accent-tint); }

/* ---- Shared component primitives (source: styles.css component classes) ---- */
.rm-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-depth-soft);
}
.rm-card {
  background: var(--color-surface);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.rm-card--depth {
  background: var(--color-depth);
  color: var(--color-on-depth);
  border-color: transparent;
}
.rm-card--grid {
  background-image:
    linear-gradient(var(--grid-line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
}
.rm-card--depth.rm-card--grid {
  background-image:
    linear-gradient(var(--grid-line-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-light) 1px, transparent 1px);
}
.rm-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-sm);
  border: var(--border-hair) solid transparent;
  padding: 10px 18px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rm-btn--primary { background: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--shadow-accent); }
.rm-btn--primary:hover { background: var(--color-accent-hover); }
.rm-btn--secondary { background: transparent; color: var(--color-text); border-color: var(--color-border-subtle); }
.rm-btn--secondary:hover { background: var(--color-accent-tint); }
.rm-btn:disabled { cursor: not-allowed; opacity: .55; }
.rm-btn--sm { padding: 7px 12px; font-size: var(--text-sm); }
.rm-btn--lg { padding: 13px 22px; }
.rm-tag {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-data);
  color: var(--color-depth-soft);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-xs);
  padding: 2px 8px;
}
.rm-chip {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--color-depth-soft);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}
.rm-callout {
  border-top: var(--border-rule) solid var(--color-accent);
  background: var(--color-surface-solid);
  border-left: var(--border-hair) solid var(--color-border);
  border-right: var(--border-hair) solid var(--color-border);
  border-bottom: var(--border-hair) solid var(--color-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-lg);
}
.rm-statcard { border-top: var(--border-hair) solid var(--color-hairline); padding-top: var(--space-md); }
.rm-statcard .value { font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--weight-semibold); color: var(--color-heading); letter-spacing: var(--tracking-h2); }
.rm-statcard .label { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--color-hud); letter-spacing: var(--tracking-data); }

.rm-container { width: min(var(--container), calc(100% - (var(--pad) * 2))); margin-inline: auto; }
.rm-section { padding-block: var(--section-gap); }
.rm-section-head { display: grid; gap: var(--space-sm); max-width: var(--container-prose); }
.rm-section-head p { color: var(--color-text-muted); font-size: var(--text-lead); }
.rm-method-step { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-md); }
.rm-method-step__number { font-family: var(--font-mono); color: var(--color-accent); font-size: var(--text-mono); padding-top: 4px; }
.rm-service-panel { display: grid; gap: var(--space-sm); padding: var(--space-xl); border: var(--border-hair) solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.rm-service-panel--depth { background: var(--color-depth); color: var(--color-on-depth); border-color: transparent; }
.rm-nav { min-height: var(--header-h); display: flex; align-items: center; gap: var(--space-lg); border-bottom: var(--border-hair) solid var(--color-border); }
.rm-nav a { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.rm-nav a[aria-current="page"] { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.rm-input { width: 100%; min-height: 44px; padding: 10px 12px; border: var(--border-hair) solid var(--color-border-subtle); border-radius: var(--radius-sm); background: var(--color-surface-solid); color: var(--color-text); font: inherit; }
.rm-input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* Button — on-depth variant (for use on dark Depth panels) */
.rm-btn--on-depth { background: #f4f1eb; color: var(--color-depth); border-color: transparent; }
.rm-btn--on-depth:hover { background: #ffffff; }

/* DataList — mono term/value rail for facts and at-a-glance specs */
.rm-data-list { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-xs) var(--space-xl); }
.rm-data-list dt { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--color-hud); letter-spacing: var(--tracking-data); text-transform: uppercase; align-self: baseline; }
.rm-data-list dd { margin: 0; font-size: var(--text-base); color: var(--color-text); align-self: baseline; }

/* Footer */
.rm-footer { border-top: var(--border-hair) solid var(--color-border); padding-block: var(--space-xl); color: var(--color-text-muted); font-size: var(--text-base); display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); align-items: center; }
.rm-footer a { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-data); color: var(--color-depth-soft); }
.rm-footer a:hover { color: var(--color-accent); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }