/* tokens.css — company-in-italy.com
 * The single source of truth for styling. Rebuilt 2026-09-13 from the design harvest of
 * lawstrust.com (reference C2, free in DESIGN-REGISTRY): navy ground, chartreuse accent,
 * one heavy grotesque family, square CTAs, banded sections.
 * Harvested: design language only (palette, type scale, spacing rhythm, component geometry).
 * No brand asset, logo, image or copy of the reference is reused (RULE-WEBSITE-CLONER IP guardrails).
 * Three layers: primitive -> semantic -> component. Nothing below this file hardcodes a colour.
 */

/* ─────────────────────────────────────────────────────────────
   LAYER 1 — PRIMITIVES. Raw values. Never used directly in markup.
   ───────────────────────────────────────────────────────────── */
:root {
  /* palette */
  --p-ink-900:    #171F27;  /* near-black blue-grey, headings and dark UI */
  --p-navy-700:   #2E3E5F;  /* deep band, darker than the reference's section navy */
  --p-navy-600:   #394D77;  /* the banded section ground */
  --p-navy-500:   #4A5F8C;  /* hover / borders on dark */
  --p-slate-500:  #596876;  /* body copy */
  --p-slate-400:  #646F7C;  /* muted meta, dark enough for AA at kicker size on white and on grey-100 */
  --p-lime-500:   #C5D43B;  /* the accent: CTA fill, markers, rules */
  --p-lime-600:   #AAB92B;  /* accent hover */
  --p-lime-100:   #F2F5D8;  /* accent wash */
  --p-grey-100:   #EFF2F5;  /* alternating section ground */
  --p-grey-200:   #DFE4EA;  /* hairline */
  --p-clay-500:   #B5533C;  /* the evidence/citation layer, carried over deliberately */
  --p-ochre-600:  #8A6D1F;  /* warnings and deadlines */
  --p-white:      #FFFFFF;

  /* type families: one family, weight does the work (the reference's own approach) */
  --p-font-sans:  "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --p-font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* spacing scale */
  --p-space-1: 4px;   --p-space-2: 8px;   --p-space-3: 12px;  --p-space-4: 16px;
  --p-space-5: 24px;  --p-space-6: 32px;  --p-space-7: 48px;  --p-space-8: 64px;
  --p-space-9: 88px;  --p-space-10: 120px;

  /* breakpoints, for reference in media queries */
  --p-bp-xs: 360px;  --p-bp-sm: 480px;  --p-bp-md: 768px;  --p-bp-lg: 1024px;
  --p-bp-xl: 1280px; --p-bp-2xl: 1440px;
}

@supports (color: oklch(50% 0.1 150)) {
  :root {
    --p-ink-900:   oklch(24.0% 0.021 251.0);
    --p-navy-700:  oklch(33.6% 0.052 267.0);
    --p-navy-600:  oklch(39.4% 0.059 267.6);
    --p-navy-500:  oklch(47.6% 0.058 268.3);
    --p-slate-500: oklch(50.5% 0.023 248.0);
    --p-slate-400: oklch(53.4% 0.021 248.6);
    --p-lime-500:  oklch(83.3% 0.152 111.5);
    --p-lime-600:  oklch(75.4% 0.149 112.3);
    --p-lime-100:  oklch(96.0% 0.048 110.9);
    --p-grey-100:  oklch(95.6% 0.005 247.9);
    --p-grey-200:  oklch(90.3% 0.008 247.9);
    --p-clay-500:  oklch(56.1% 0.133  34.5);
    --p-ochre-600: oklch(54.9% 0.100  87.4);
  }
}

/* ─────────────────────────────────────────────────────────────
   LAYER 2 — SEMANTIC. What a value means. This is what components consume.
   ───────────────────────────────────────────────────────────── */
:root {
  --c-ink:        var(--p-ink-900);
  --c-body:       var(--p-slate-500);
  --c-muted:      var(--p-slate-400);
  --c-paper:      var(--p-white);
  --c-paper-alt:  var(--p-grey-100);
  --c-band:       var(--p-navy-600);   /* the dark banded section */
  --c-band-deep:  var(--p-navy-700);   /* header, footer, hero overlay */
  --c-rule:       var(--p-grey-200);
  --c-accent:     var(--p-lime-500);
  --c-accent-dark:var(--p-lime-600);
  --c-accent-wash:var(--p-lime-100);
  --c-link:       var(--p-navy-600);   /* links in running copy: readable, not lime */
  --c-link-hover: var(--p-ink-900);
  --c-evidence:   var(--p-clay-500);
  --c-warning:    var(--p-ochre-600);
  --c-on-accent:  var(--p-ink-900);    /* dark text on the lime fill, as harvested */
  --c-on-dark:    var(--p-white);
  /* text on a dark ground, stepped down: the running copy and the quieter meta line */
  --c-on-dark-soft: rgba(255, 255, 255, 0.87);
  --c-on-dark-dim:  rgba(255, 255, 255, 0.72);
  --c-on-dark-rule: rgba(255, 255, 255, 0.18);

  /* type scale: heavier and tighter than the outgoing editorial scale */
  --t-h1:      3.25rem;  --t-h1-lh:   1.06;  --t-h1-ls:   -0.028em;
  --t-h2:      2.125rem; --t-h2-lh:   1.15;  --t-h2-ls:   -0.022em;
  --t-h3:      1.375rem; --t-h3-lh:   1.27;  --t-h3-ls:   -0.012em;
  --t-h4:      1.0625rem;--t-h4-lh:   1.41;
  --t-body:    1.0625rem;--t-body-lh: 1.72;
  --t-small:   0.9375rem;--t-small-lh:1.55;
  --t-table:   0.9375rem;--t-table-lh:1.5;
  --t-kicker:  0.75rem;  --t-kicker-lh:1.4;  --t-kicker-ls: 0.085em;

  --w-regular: 400;  --w-medium: 700;  --w-semibold: 700;  --w-black: 900;

  /* geometry: square CTAs against softly rounded cards, as harvested */
  --radius:        0;
  --radius-card:   14px;
  --radius-round:  50%;
  --shadow:        0 4px 12px rgba(23, 31, 39, 0.10);
  --shadow-lift:   0 10px 30px rgba(23, 31, 39, 0.16);
  --hairline:      1px solid var(--c-rule);
  --rule-thick:    3px;

  /* layout */
  --w-content:  1240px;
  --w-measure:  70ch;
  --w-sidebar:  260px;
  --section-y:  var(--p-space-9);

  --focus-ring: 3px solid var(--c-accent-dark);
  --focus-offset: 2px;
  --motion:     160ms ease-out;
}

@media (max-width: 1023px) {
  :root { --t-h1: 2.25rem; --t-h2: 1.625rem; --t-h3: 1.25rem; --section-y: var(--p-space-7); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0ms; }
}

/* ─────────────────────────────────────────────────────────────
   LAYER 3 — COMPONENT. Per-component tokens. Named after the component.
   ───────────────────────────────────────────────────────────── */
:root {
  --header-bg:           var(--c-band-deep);
  --header-fg:           var(--c-on-dark);
  --header-util-bg:      rgba(0, 0, 0, 0.18);

  --sidebar-bg:          var(--c-paper-alt);
  --sidebar-active-bar:  var(--rule-thick) solid var(--c-accent);
  --sidebar-divider:     var(--hairline);

  --table-head-bg:       var(--c-band);
  --table-head-fg:       var(--c-on-dark);
  --table-border:        var(--hairline);
  --table-num-align:     right;
  --table-zebra:         var(--c-paper-alt);

  --citation-rule:       var(--rule-thick) solid var(--c-evidence);
  --citation-font:       var(--p-font-mono);

  --definition-bg:       var(--c-accent-wash);
  --definition-rule:     var(--rule-thick) solid var(--c-accent);

  --axis-line:           2px solid var(--c-rule);
  --axis-node-size:      36px;

  --card-border:         var(--hairline);
  --card-pad:            var(--p-space-5);
  --card-radius:         var(--radius-card);

  --cta-band-bg:         var(--c-band);
  --cta-band-fg:         var(--c-on-dark);

  --btn-bg:              var(--c-accent);
  --btn-fg:              var(--c-on-accent);
  --btn-bg-hover:        var(--c-accent-dark);
  --btn-pad:             14px 24px;
  --btn-ls:              0.04em;

  --byline-avatar:       44px;

  --form-field-border:   var(--hairline);
  --form-field-pad:      var(--p-space-3);
  --form-rail-bg:        var(--c-paper-alt);

  --consent-bg:          var(--c-band-deep);
  --consent-fg:          var(--c-on-dark);
}

/* ─────────────────────────────────────────────────────────────
   BASE. The minimum the tokens imply. Everything else lives in style.css.
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-body);
  font-family: var(--p-font-sans);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-weight: var(--w-regular);
}

h1, h2, h3, h4 { font-family: var(--p-font-sans); color: var(--c-ink); margin: 0 0 var(--p-space-4); }
h1 { font-size: var(--t-h1); line-height: var(--t-h1-lh); letter-spacing: var(--t-h1-ls); font-weight: var(--w-black); }
h2 { font-size: var(--t-h2); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-ls); font-weight: var(--w-black); margin-top: var(--p-space-8); }
h3 { font-size: var(--t-h3); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-ls); font-weight: var(--w-semibold); margin-top: var(--p-space-6); }
h4 { font-size: var(--t-h4); line-height: var(--t-h4-lh); font-weight: var(--w-semibold); margin: var(--p-space-5) 0 var(--p-space-2); }

p, li { max-width: var(--w-measure); }

a { color: var(--c-link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--c-link-hover); }
a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.kicker {
  font-family: var(--p-font-sans);
  font-size: var(--t-kicker);
  line-height: var(--t-kicker-lh);
  letter-spacing: var(--t-kicker-ls);
  text-transform: uppercase;
  font-weight: var(--w-black);
  color: var(--c-muted);
}

.table-scroll { overflow-x: auto; margin: var(--p-space-6) 0; }
.table-scroll table { border-collapse: collapse; width: 100%; font-size: var(--t-table); line-height: var(--t-table-lh); }
.table-scroll th { background: var(--table-head-bg); color: var(--table-head-fg); font-weight: var(--w-black); text-align: left; letter-spacing: 0.01em; }
.table-scroll th, .table-scroll td { border: var(--table-border); padding: var(--p-space-3) var(--p-space-4); vertical-align: top; }
.table-scroll tbody th { background: var(--c-paper-alt); color: var(--c-ink); }
.table-scroll tbody tr:nth-child(even) td { background: var(--table-zebra); }
.table-scroll td.num { text-align: var(--table-num-align); font-variant-numeric: tabular-nums; }

img { max-width: 100%; height: auto; }