/* ============================================================
   Shapes Drawings Library — design tokens (self-contained)

   product.css and resources.css are written against the theme's
   global design tokens (normally defined in the theme styles.css).
   When that stylesheet isn't loaded on a page, every var() is
   undefined and the components render unstyled.

   To keep the plugin self-sufficient, we define those tokens here,
   SCOPED to our own markup (.sdl-library for the library, .dl-modal
   for the footer modal) so they never leak into or override the
   wider theme. If the theme DOES define these on :root, our values
   simply match the Shapes brand defaults.
   ============================================================ */

.sdl-library,
.dl-modal {
	/* Brand blues / teals */
	--navy: #0e4174;
	--navy-darker: #0a3159;
	--navy-deep: #0c3a68;
	--teal: #337179;
	--teal-deep: #285a61;
	--blue: #5e8ab4;
	--blue-soft: #eaf0f7;

	/* CTA accent (matches the reference tweak defaults) */
	--accent: #337179;
	--accent-ink: #ffffff;
	--brand: #0e4174;

	/* Neutrals / text */
	--ink: #0f2540;
	--body: #3f4b59;
	--muted: #6a7889;
	--line: #e3e8ef;
	--line-soft: #eef2f7;
	--bg-tint: #f5f8fb;

	/* Radii */
	--radius: 8px;
	--radius-lg: 14px;

	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(16, 36, 61, 0.06);
	--shadow-md: 0 10px 28px rgba(16, 36, 61, 0.10);
	--shadow-lg: 0 24px 60px rgba(16, 36, 61, 0.20);

	/* Fonts — families first, graceful system fallbacks after */
	--font-head: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Base typography for the library so text isn't left at theme defaults. */
.sdl-library {
	font-family: var(--font-body);
	color: var(--body);
}

/* Neutralise theme link colours (the source of the pink icons/titles);
   the component's own rules recolour text/icons via the tokens above. */
.sdl-library a {
	color: inherit;
	text-decoration: none;
}
.sdl-library a:hover {
	text-decoration: none;
}

/* Button reset — the theme ships a Bootstrap-style rule:
     [type="button"],[type="submit"],button{ border:1px solid #c36; color:#c36; ... }
   which paints the accordion headers (.lib-group__head is a <button>) and the
   modal buttons pink. We match the same selectors, scoped to our markup, so our
   reset always outranks it. Only the chrome is reset — the component's own
   typography / padding / colour rules are left untouched. */
.sdl-library button,
.sdl-library [type="button"],
.sdl-library [type="submit"],
.sdl-library [type="reset"],
.dl-modal button,
.dl-modal [type="button"],
.dl-modal [type="submit"],
.dl-modal [type="reset"] {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.sdl-library button:focus,
.dl-modal button:focus {
	outline: none;
}

/* Accordion header: the theme also paints buttons pink on :focus/:active, and
   the header keeps focus while open — so neutralise every interaction state
   here (higher specificity than the theme) while preserving the hover tint. */
.sdl-library .lib-group__head,
.sdl-library .lib-group__head:hover,
.sdl-library .lib-group__head:focus,
.sdl-library .lib-group__head:focus-visible,
.sdl-library .lib-group__head:active {
	color: var(--ink);
	background-color: transparent;
	border: 0;
	box-shadow: none;
	outline: none;
}
.sdl-library .lib-group__head:hover {
	background-color: var(--bg-tint);
}
/* Belt-and-suspenders: keep card/group borders on the token colour, in case the
   theme also targets these containers directly. */
.sdl-library .lib-group,
.sdl-library .cat-card,
.sdl-library .dwg-list a {
	border-color: var(--line);
}

/* Minimal .btn base — the real buttons live in the theme styles.css, which
   may be absent, so provide a self-contained accent button for the modal. */
.sdl-library .btn,
.dl-modal .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	padding: 14px 22px;
	border: none;
	border-radius: var(--radius);
	cursor: pointer;
	text-decoration: none;
	transition: filter 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.sdl-library .btn--accent,
.dl-modal .btn--accent {
	background: var(--accent);
	color: var(--accent-ink);
}
.sdl-library .btn--accent:hover,
.dl-modal .btn--accent:hover {
	filter: brightness(1.07);
}
.dl-modal .btn:disabled {
	opacity: 0.6;
	cursor: default;
}