/* ===========================================================================
   llocal.css — the design system for llocal.com
   ===========================================================================

   One palette, one scale, one set of components, for every page on the site.

   WHY THIS FILE EXISTS

   Twenty-five product spec pages were written by hand and each carried its own
   `<style>` block. Between them they used 341 distinct class names and 117 CSS
   custom properties, and the same idea had six names:

       --bg   --surface   --bg2   --surface2   --bg3   --card

   Six names for one role is not a design system; it is six design systems that
   happen to agree on a colour. Nothing could be changed once, and a page that
   drifted simply looked different, which is how you end up with twenty-five
   pages that are all correct and none of them the same.

   HOW IT APPLIES

   Every page loads this file FIRST and keeps its own `<style>` after it. That
   ordering is the whole mechanism:

       <link rel="stylesheet" href="/assets/llocal.css">   ← the system
       <style>        this page's own rules        </style>          ← the exception

   So a page that already looks right keeps looking right, and a page that is
   missing a piece inherits it. No page loses anything, and nothing has to be
   rewritten to benefit.

   THE LEGACY ALIASES

   The six historical names are re-pointed at the canonical tokens below, so a
   page that says `--surface2` now resolves to the same value as one that says
   `--l-wash-2`. That is what makes this additive rather than a migration:
   the old vocabulary keeps working and quietly converges.

   Light and dark are both first-class. Every token has a dark value; nothing
   is a hard-coded colour below this line.
   -------------------------------------------------------------------------- */

:root {
	/* -- surfaces, lightest to darkest ---------------------------------- */
	--l-paper:      #faf9f5;
	--l-surface:    #ffffff;
	--l-wash-1:     #f4f1ea;
	--l-wash-2:     #fbfaf7;

	/* -- ink ------------------------------------------------------------- */
	--l-ink:        #141413;
	--l-ink-2:      #3a3937;
	--l-muted:      #6f6c66;
	--l-faint:      #97948c;
	--l-rule:       #e6e2d7;

	/* -- accents --------------------------------------------------------- */
	--l-accent:     #d97757;   /* warm orange — the house accent           */
	--l-accent-dim: #c15f3c;
	--l-accent-2:   #8a6d4b;   /* bronze — secondary accent                */
	--l-blue:       #6a9bcc;
	--l-green:      #788c5d;
	--l-amber:      #b7791f;
	--l-red:        #c0392b;
	--l-deep:       #1c1a16;   /* for inversed bands and cover sheets     */

	/* -- type ------------------------------------------------------------ */
	--l-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--l-serif: 'Lora', Georgia, 'Times New Roman', serif;
	--l-mono: 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
	--l-measure: 74ch;

	/* -- space and shape -------------------------------------------------- */
	--l-radius:    10px;
	--l-radius-sm: 6px;
	--l-rule-width: 1px;
	--l-shadow:    0 1px 2px rgba(20, 20, 19, .05), 0 8px 24px rgba(20, 20, 19, .04);
}

@media (prefers-color-scheme: dark) {
	:root {
		--l-paper:      #141413;
		--l-surface:    #1c1a16;
		--l-wash-1:     #26231e;
		--l-wash-2:     #201e1a;
		--l-ink:        #faf9f5;
		--l-ink-2:      #d8d5ce;
		--l-muted:      #97948c;
		--l-faint:      #7d7a73;
		--l-rule:       #33302a;
		--l-accent-dim: #d98a6c;
		--l-shadow:     0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
	}
}

/* -- legacy aliases ---------------------------------------------------------
   Every historical name, pointed at the canonical token. Pages using any of
   these now resolve through one definition, so changing --l-wash-1 once
   changes it everywhere. */

:root {
	--bg:        var(--l-paper);
	--bg2:       var(--l-surface);
	--bg3:       var(--l-wash-1);
	--surface:   var(--l-surface);
	--surface2:  var(--l-wash-1);
	--card:      var(--l-surface);
	--panel:     var(--l-wash-1);
	--text:      var(--l-ink);
	--text-2:    var(--l-ink-2);
	--muted:     var(--l-muted);
	--dim:       var(--l-faint);
	--border:    var(--l-rule);
	--paper:     var(--l-paper);
	--wash:      var(--l-wash-1);
	--ink:       var(--l-ink);
	--border2:   var(--l-rule);
	--accent:    var(--l-accent);
	--accent2:   var(--l-accent-2);
	--primary:   var(--l-accent);
	--blue:      var(--l-blue);
	--green:     var(--l-green);
	--amber:     var(--l-amber);
	--yellow:    var(--l-amber);
	--red:       var(--l-red);
	--danger:    var(--l-red);
	--deep:      var(--l-deep);
	--rule:      var(--l-rule);
	--radius:    var(--l-radius);
	--font:      var(--l-sans);
	--sans:      var(--l-sans);
	--serif:     var(--l-serif);
	--mono:      var(--l-mono);
	--c-bg:      var(--l-paper);
	--c-surface: var(--l-surface);
	--c-border:  var(--l-rule);
	--c-text-1:  var(--l-ink);
	--c-text-2:  var(--l-accent);
	--c-text-3:  var(--l-muted);
	--c-teal:    var(--l-green);
	--c-amber:   var(--l-amber);
}

/* ===========================================================================
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--l-paper);
	color: var(--l-ink);
	font-family: var(--l-sans);
	font-size: 16px;
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.22;
	color: var(--l-ink);
	margin: 2em 0 0.5em;
	text-wrap: balance;
}
h1 { font-size: clamp(28px, 4.4vw, 42px); margin-top: 0; letter-spacing: -0.022em; }
h2 { font-size: clamp(21px, 2.6vw, 27px); }
h3 { font-size: 19px; }
h4 { font-size: 16.5px; }

p, li { max-width: var(--l-measure); }
p { margin: 1em 0; }

a { color: var(--l-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--l-accent-dim); }
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--l-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

code {
	font-family: var(--l-mono);
	font-size: 0.87em;
	background: var(--l-wash-1);
	border-radius: 4px;
	padding: 1px 5px;
}
pre {
	background: var(--l-wash-1);
	border: var(--l-rule-width) solid var(--l-rule);
	border-radius: var(--l-radius);
	padding: 16px 18px;
	overflow-x: auto;
	font-family: var(--l-mono);
	font-size: 13px;
	line-height: 1.55;
}
pre code { background: none; padding: 0; }

hr { border: 0; border-top: var(--l-rule-width) solid var(--l-rule); margin: 2.5em 0; }

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

/* ===========================================================================
   Layout
   -------------------------------------------------------------------------- */

.page, main, .wrap, .container, .content {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 28px;
}
.narrow, .prose { max-width: 780px; }

.section { padding: 40px 0; }
.section + .section { border-top: var(--l-rule-width) solid var(--l-rule); }
.section-label,
.eyebrow,
.section-num {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--l-accent);
	margin: 0 0 6px;
}
.section-title { font-size: 25px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 10px; }
.sub { color: var(--l-muted); margin: 0 0 18px; }

/* ===========================================================================
   Navigation
   -------------------------------------------------------------------------- */

.topnav, .topbar {
	background: var(--l-deep);
	color: #faf9f5;
	border-bottom: var(--l-rule-width) solid var(--l-rule);
	font-size: 13.5px;
}
.topnav a, .topbar a { color: #b8b4ac; text-decoration: none; }
.topnav a:hover, .topbar a:hover { color: var(--l-accent); }
.nav-item, .topnav .sep { color: var(--l-faint); }

.toc {
	background: var(--l-surface);
	border: var(--l-rule-width) solid var(--l-rule);
	border-radius: var(--l-radius);
	padding: 18px 20px;
}
.toc-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--l-muted); margin-bottom: 10px; }
.toc-link {
	display: block;
	padding: 5px 0;
	color: var(--l-ink-2);
	text-decoration: none;
	border-bottom: var(--l-rule-width) solid var(--l-rule);
	font-size: 14px;
}
.toc-link:hover { color: var(--l-accent); }
.toc-link:last-child { border-bottom: 0; }

/* ===========================================================================
   Components
   -------------------------------------------------------------------------- */

.card {
	background: var(--l-surface);
	border: var(--l-rule-width) solid var(--l-rule);
	border-radius: var(--l-radius);
	padding: 18px 20px;
}
.card:hover { border-color: var(--l-accent); }

.callout {
	background: var(--l-wash-2);
	border-left: 3px solid var(--l-amber);
	border-radius: 0 var(--l-radius-sm) var(--l-radius-sm) 0;
	padding: 15px 19px;
	margin: 20px 0;
	font-size: 14.5px;
}
.callout.warning, .callout.danger { border-left-color: var(--l-red); }
.callout.corrected { border-left-color: var(--l-green); }
.callout .tag {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--l-accent);
	margin-bottom: 5px;
}

.badge, .pill {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--l-wash-1);
	color: var(--l-muted);
}
.badge.accent { background: color-mix(in srgb, var(--l-accent) 12%, transparent); color: var(--l-accent); }
.badge.partial { background: color-mix(in srgb, var(--l-amber) 14%, transparent); color: var(--l-amber); }

/* Tables — the same component under three historical names. */
.table-wrap, .tbl-wrap, .tablewrap { overflow-x: auto; margin: 20px 0; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--l-muted);
	padding: 9px 12px;
	border-bottom: var(--l-rule-width) solid var(--l-rule);
	background: var(--l-wash-1);
}
td { padding: 11px 12px; border-bottom: var(--l-rule-width) solid var(--l-rule); color: var(--l-ink-2); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }

/* Feature lists — five historical vocabularies for one component. */
.feat, .feature-item, .mod, .module {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	padding: 9px 0;
	border-bottom: var(--l-rule-width) solid var(--l-rule);
}
.feat:last-child, .feature-item:last-child, .mod:last-child, .module:last-child { border-bottom: 0; }
.feat-dot, .bullet-dot {
	flex: none;
	width: 7px;
	height: 7px;
	margin-top: 9px;
	border-radius: 50%;
	background: var(--l-accent);
}
.feat-text, .mod-desc, .mod-name, .feature-list { color: var(--l-ink-2); }
.mod-name, .feature-title { font-weight: 600; color: var(--l-ink); }

/* Architecture blocks */
.arch-box {
	background: var(--l-wash-1);
	border: var(--l-rule-width) solid var(--l-rule);
	border-radius: var(--l-radius);
	padding: 16px 18px;
}
.arch-comp {
	background: var(--l-surface);
	border: var(--l-rule-width) solid var(--l-rule);
	border-radius: var(--l-radius-sm);
	padding: 12px 14px;
	font-size: 14px;
}
.arch-arrow { color: var(--l-faint); }

/* ===========================================================================
   Collateral block — the documents attached to each product page.
   Defined here rather than injected per page, so there is one of it.
   -------------------------------------------------------------------------- */

.xd-docs {
	margin: 30px 0 8px;
	padding: 20px 22px;
	border: var(--l-rule-width) solid var(--l-rule);
	border-left: 3px solid var(--l-accent);
	border-radius: 0 10px 10px 0;
	background: var(--l-wash-2);
}
.xd-docs-h {
	font-size: 11px; font-weight: 700; letter-spacing: .11em;
	text-transform: uppercase; color: var(--l-accent); margin-bottom: 4px;
}
.xd-docs-t { font-size: 16.5px; font-weight: 700; margin-bottom: 4px; color: var(--l-ink); }
.xd-docs-s { font-size: 13.5px; color: var(--l-muted); margin: 0 0 14px; line-height: 1.55; }
.xd-docs-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.xd-doc { border: var(--l-rule-width) solid var(--l-rule); border-radius: 8px; padding: 11px 13px; background: var(--l-surface); }
.xd-doc-n { font-weight: 700; font-size: 14px; color: var(--l-ink); margin-bottom: 2px; }
.xd-doc-d { font-size: 12px; color: var(--l-muted); line-height: 1.45; margin-bottom: 8px; }
.xd-doc-l { display: inline-block; font-size: 11.5px; font-weight: 600; text-decoration: none; color: var(--l-accent); margin-right: 12px; }
.xd-doc-l.pdf { color: var(--l-green); }
.xd-doc-l:hover { text-decoration: underline; }

/* ===========================================================================
   Print
   -------------------------------------------------------------------------- */

@media print {
	body { background: #fff; color: #000; font-size: 11pt; }
	.topnav, .topbar, .toc, .xd-docs, .btn, .theme-cta { display: none !important; }
	h1 { font-size: 22pt; }
	h2, h3 { break-after: avoid; page-break-after: avoid; }
	h2, h3, p, li, table, pre, blockquote, .callout, .card { break-inside: avoid; }
	a { color: #000; text-decoration: none; }
	th { background: #eee !important; }
	thead { display: table-header-group; }
}