/*
 * Lincoln Town Square — design tokens.
 *
 * The single source of truth for every colour, size, family and space in the
 * redesign. Nothing else in this codebase should hardcode a hex from here on;
 * if you find yourself typing "#3E7C74" anywhere, use var(--lts-teal).
 *
 * Values come from planning/website-redesign-build-spec.md §3, which in turn
 * comes from mobile-app/src/theme.ts. When one moves, both move.
 *
 * This file is loaded before ltsq-design-system.css and declares nothing but
 * custom properties — no selectors that paint anything. That separation is
 * what makes it safe to read: a token file that also styles things stops being
 * a token file.
 */

:root {

	/* --- Core ------------------------------------------------------------ */

	--lts-ink: #333F48;          /* Charcoal Slate. Masthead, headings, footer band */
	--lts-ink-deep: #2C363E;     /* Nav bar under the masthead, footer */
	--lts-teal: #3E7C74;         /* Muted Teal. Buttons, links, the verified mark */
	--lts-teal-pressed: #2F645D;

	--lts-bg: #FFFFFF;
	--lts-surface: #F5F8F7;      /* Card fills, form fields, tinted panels */
	--lts-border: #E1EAE8;       /* 1px hairlines, thumbnail placeholders */

	--lts-text: #222222;
	--lts-text-body: #2b2b2b;    /* Article body specifically — slightly warmer */
	--lts-text-muted: #666666;
	--lts-text-dek: #555555;     /* Deks and card excerpts */
	--lts-placeholder-glyph: #9BB0AB;

	/* Footer, unchanged from the current production site. */
	--lts-footer-text: #C7CDD3;
	--lts-footer-link-hover: #8FCCC2;
	--lts-footer-copyright: #8A96A0;

	/* --- Content streams -------------------------------------------------- */
	/*
	 * Keys match ltsq_rest_get_feed_type_map() so the CSS, the REST API and the
	 * mobile app all speak one vocabulary. See the [data-stream] block below,
	 * which is the part that actually removes the duplication.
	 */

	--lts-news: #3E7C74;              /* == --lts-teal, deliberately */
	--lts-notice: #B08A00;
	--lts-alert: #D32F2F;
	--lts-event: #6B4FA0;
	--lts-directory: #2E7D32;
	--lts-story: #1F6FA8;             /* New in this design. See the note below */
	--lts-story-pressed: #175784;

	/*
	 * Developing Story status colours, already in inc/badges.php before the
	 * redesign and unchanged by it.
	 */
	--lts-story-resolved: #6b8f71;
	--lts-story-archived: #999999;

	/* --- Tints ------------------------------------------------------------ */
	/*
	 * Pale panel fills and their edges, for a callout that needs to read as a
	 * state rather than as a card: "being reviewed", an error, a directory
	 * note, something important.
	 *
	 * Declared here in roadmap #61 because the mobile app had all six
	 * hard-coded across a dozen files while the website had two of them
	 * hard-coded in ltsq-account.css, and neither side knew the other used the
	 * same values. The notice pair is the one already on the website (the
	 * amber "being reviewed" trio, lifted from the app's orgStatusPill() in the
	 * first place); the other four are the app's, promoted here so there is one
	 * list rather than two.
	 *
	 * Nothing on the website reads these yet — they are declarations, the
	 * website's own rules still carry their literals, and pointing those rules
	 * at these names is a separate, deliberately separate, change. Adding a
	 * custom property paints nothing on its own.
	 */

	--lts-tint-notice: #FBF8EE;       /* "Being reviewed", and notice callouts */
	--lts-tint-notice-edge: #E8DFC0;
	--lts-tint-error: #FDF6F6;
	--lts-tint-error-edge: #F0C9C9;
	--lts-tint-directory: #EAF3EA;
	--lts-tint-important: #FDF1E6;

	/* --- Alert severity --------------------------------------------------- */
	/*
	 * Advisory moved from the old #f5c518 to #B08A00 in this redesign, which
	 * resolves a real app/web divergence: theme.ts already used #B08A00 and
	 * carried a comment saying the website should be reconciled. At #B08A00 the
	 * badge text becomes white; the old yellow needed dark #4a3a00 text.
	 */

	--lts-sev-advisory: #B08A00;
	--lts-sev-important: #e07b1a;
	--lts-sev-urgent: #d32f2f;
	--lts-sev-urgent-hover: #b71c1c;

	/* --- Type ------------------------------------------------------------- */
	/*
	 * Divi's Customizer is the loader for both families (heading = Newsreader,
	 * body = Public Sans), so Divi's own modules obey them too. These tokens
	 * name the same families for our own components. Inter is dropped.
	 */

	--lts-font-display: "Newsreader", Georgia, "Times New Roman", serif;
	--lts-font-ui: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	--lts-fs-hero: 46px;
	--lts-fs-h1: 52px;
	--lts-fs-page-title: 44px;
	--lts-fs-wordmark: 30px;
	--lts-fs-dek: 20px;
	--lts-fs-body: 18px;
	--lts-fs-card-title: 16px;
	--lts-fs-card-title-archive: 24px;
	--lts-fs-excerpt: 14.5px;
	--lts-fs-meta: 13px;
	--lts-fs-section-header: 14px;
	--lts-fs-nav: 14px;
	--lts-fs-button: 14px;
	--lts-fs-label: 13px;
	--lts-fs-input: 15px;
	--lts-fs-kicker: 11px;
	--lts-fs-badge: 10px;
	--lts-fs-counter: 9px;   /* The floor. Only the saved counter and mobile badges */

	--lts-lh-hero: 1.12;
	--lts-lh-h1: 1.08;
	--lts-lh-page-title: 1.10;
	--lts-lh-wordmark: 1.15;
	--lts-lh-dek: 1.55;
	--lts-lh-body: 1.75;
	--lts-lh-card-title: 1.35;
	--lts-lh-card-title-archive: 1.25;
	--lts-lh-excerpt: 1.6;

	--lts-ls-kicker: 1.5px;
	--lts-ls-section-header: 0.06em;
	--lts-ls-badge: 0.6px;

	/* Measure caps. The design is explicit about these. */
	--lts-measure-h1: 20ch;
	--lts-measure-dek: 60ch;
	--lts-measure-body: 66ch;

	/* --- Space, rules, layout --------------------------------------------- */
	/* The app's 4/8/16/24/32 scale (theme.ts `spacing`). */

	--lts-space-1: 4px;
	--lts-space-2: 8px;
	--lts-space-3: 16px;
	--lts-space-4: 24px;
	--lts-space-5: 32px;

	/*
	 * Zero, everywhere, on purpose. Square corners plus rules read as editorial
	 * on a dense information page. Defined as a token so the intent is
	 * greppable and a future exception has one place to argue with.
	 *
	 * This used to describe the app's 8-14px radii as "a deliberate departure"
	 * and "a touch-target convention". Neither is true any more: roadmap #61
	 * squared the app off too, so both surfaces are at zero and the app's
	 * `radius` export in mobile-app/src/theme.ts is this value. Corner radius
	 * never affected touch targets anyway — those are still ≥44pt in the app,
	 * set by padding and minimum sizes, which is what actually decides them.
	 */
	--lts-radius: 0;

	--lts-rule-section: 2px solid var(--lts-ink);   /* Between major page sections */
	--lts-rule-hairline: 1px solid var(--lts-border); /* Inside a section */
	--lts-rule-column: 2px solid var(--lts-border);   /* Main column / sidebar divider */

	--lts-stream-border-left: 4px;   /* Stream identity on a list card */
	--lts-stream-border-top: 3px;    /* Stream identity on a grid card */
	--lts-severity-border-left: 6px; /* Alerts archive, matching the pre-redesign rule */

	--lts-maxw: 1240px;              /* Wider than Divi's 1080px default */
	--lts-gutter: 24px;

	--lts-focus-ring: 2px solid var(--lts-teal);
	--lts-focus-offset: 2px;

	/*
	 * Hover colour transitions only. The design asks for no animation beyond
	 * this, and anything that is added should stay under 150ms.
	 */
	--lts-transition: 120ms ease;
}

/*
 * Layer 2 — the indirection that removes the duplication.
 *
 * Before the redesign the teal button was declared in four separate places and
 * the badge pill in three, with no shared value between them. Rebinding one
 * variable per stream means the card rule, the badge rule, the section-header
 * rule and the nav-item rule each exist exactly once and serve all six streams
 * plus the sponsored variant.
 *
 * Set data-stream on any container and everything inside it inherits the right
 * accent. PHP sets it from ltsq_stream_of_post(), so the attribute value is
 * always one of the REST feed type keys.
 */

/*
 * The fallback goes FIRST, not last. :root and [data-stream="x"] have the same
 * specificity, so if the attribute ever landed on <html> itself, a fallback
 * declared afterwards would win by source order and silently defeat the whole
 * mechanism. Declaring it first makes that impossible.
 *
 * A missing --lts-severity resolves to the neutral hairline rather than to
 * advisory: an unknown severity should read as "no severity stated", never as
 * the mildest one. Understating an alert is the one direction this must not
 * fail in.
 */
:root {
	--lts-stream: var(--lts-teal);
	--lts-severity: var(--lts-border);
	--lts-on-stream: #ffffff;
	--lts-on-severity: #ffffff;
	--lts-stream-text: var(--lts-stream);
	--lts-severity-text: var(--lts-severity);
	/* How a stream-filled button changes on hover. See the notice rule below. */
	--lts-stream-hover-filter: brightness(0.9);
}

/*
 * Text colours that go with each fill (review M21, owner decision 2026-09-14).
 * White small text on the amber notice/advisory fill is 3.2:1 and on the
 * orange "important" fill 3.0:1; WCAG asks 4.5:1. The fills stay exactly as
 * they are (the app shares them); what changes is the text: near-black ON
 * those fills (4.9:1, 5.3:1), and a deeper amber/orange where the colour
 * itself is used AS text on white (#8A6D00 4.9:1, #AD5700 5.1:1; #8A6D00 is
 * the app's own text amber). Every rule sets both tokens explicitly, because
 * custom properties inherit: a news badge inside a notice container must not
 * pick up the notice's dark text.
 *
 * The same goes for the hover filter. Darkening the amber by 10% takes its
 * near-black text to 4.0:1, so the notice stream lightens instead (5.9:1).
 * Every other stream is reset to the default here, before the notice rule.
 */
[data-stream],
[data-story-status]               { --lts-stream-hover-filter: brightness(0.9); }
[data-stream="local_news"]       { --lts-stream: var(--lts-news);      --lts-on-stream: #ffffff;          --lts-stream-text: var(--lts-news); }
[data-stream="community_notice"]  { --lts-stream: var(--lts-notice);    --lts-on-stream: var(--lts-text);  --lts-stream-text: #8A6D00; --lts-stream-hover-filter: brightness(1.1); }
[data-stream="alert"]             { --lts-stream: var(--lts-alert);     --lts-on-stream: #ffffff;          --lts-stream-text: var(--lts-alert); }
[data-stream="event"]             { --lts-stream: var(--lts-event);     --lts-on-stream: #ffffff;          --lts-stream-text: var(--lts-event); }
[data-stream="directory"]         { --lts-stream: var(--lts-directory); --lts-on-stream: #ffffff;          --lts-stream-text: var(--lts-directory); }
[data-stream="developing_story"]  { --lts-stream: var(--lts-story);     --lts-on-stream: #ffffff;          --lts-stream-text: var(--lts-story); }

/*
 * Sponsored is not a content stream — it is a disclosure state, and it
 * deliberately reads as charcoal rather than borrowing any editorial colour.
 * Keeping it in this map means a sponsored card is the same component as an
 * editorial one with one attribute changed, which is exactly how it should
 * behave: visually and textually distinguishable, never a different codepath
 * that could drift out of carrying its disclosure line.
 */
[data-stream="sponsored"]         { --lts-stream: var(--lts-ink); --lts-on-stream: #ffffff; --lts-stream-text: var(--lts-ink); }

/* Severity, same mechanism, for alert cards and the alert single's band. */
[data-severity="advisory"]        { --lts-severity: var(--lts-sev-advisory);  --lts-on-severity: var(--lts-text); --lts-severity-text: #8A6D00; }
[data-severity="important"]       { --lts-severity: var(--lts-sev-important); --lts-on-severity: var(--lts-text); --lts-severity-text: #AD5700; }
[data-severity="urgent"]          { --lts-severity: var(--lts-sev-urgent);    --lts-on-severity: #ffffff;         --lts-severity-text: var(--lts-sev-urgent); }

/*
 * Story status, for the Developing Stories archive and its badges. Same rule as
 * M21 above, fills unchanged. White on the resolved sage is 3.6:1 and on the
 * archived grey 2.9:1. Near-black on grey is 5.6:1 (4.6:1 under the stream
 * button's hover darkening). Near-black on sage is only 4.4:1, so resolved
 * takes black: 5.8:1, 4.8:1 on hover. As text on white, the deeper #4E6B53 is
 * 5.9:1 and #666666 is 5.7:1.
 */
[data-story-status="new"],
[data-story-status="active"]      { --lts-stream: var(--lts-story);          --lts-on-stream: #ffffff;         --lts-stream-text: var(--lts-story); }
[data-story-status="resolved"]    { --lts-stream: var(--lts-story-resolved); --lts-on-stream: #000000;         --lts-stream-text: #4E6B53; }
[data-story-status="archived"]    { --lts-stream: var(--lts-story-archived); --lts-on-stream: var(--lts-text); --lts-stream-text: var(--lts-text-muted); }