/*
 * Pro Lex Strategy — final visual system
 * Direction: quiet luxury for legal B2B — editorial serif + precise sans.
 * Light theme surface priority: canvas > section > elevated > card > interactive.
 */

:root {
  --font-body: "Plus Jakarta Sans", "Manrope", sans-serif;
  --font-display: "Newsreader", "Noto Serif", Georgia, serif;
}

body,
button,
input,
textarea,
select {
  font-family: var(--font-body) !important;
}

h1,
h2,
h3,
h4,
.brand,
.hero-brand,
.brand-splash__name {
  font-family: var(--font-display) !important;
}

html[data-theme="light"] {
  /* 01 — dominant canvas: most of the page */
  --light-canvas: #f5f6f4;
  /* 02 — section rhythm: alternate bands and wide wrappers */
  --light-section: #ecefeb;
  /* 03 — elevated surface: hero/supporting panels and table frames */
  --light-elevated: #e2e7e3;
  /* 04 — content card: primary reading surface */
  --light-card: #ffffff;
  /* 05 — soft card: secondary cells, inputs, metadata strips */
  --light-card-soft: #f7f9f7;
  /* 06 — reserved accents: actions, focus, active states */
  --light-ink: #1c292c;
  --light-muted: #536267;
  --light-line: #cbd4d0;
  --light-accent: #9b603c;
  --light-accent-strong: #74432b;
  --light-accent-wash: #f0e5dd;

  --page-bg: var(--light-canvas);
  --surface: var(--light-card);
  --surface-low: var(--light-section);
  --surface-container: var(--light-elevated);
  --surface-high: var(--light-card);
  --surface-variant: var(--light-card-soft);
  --text: var(--light-ink);
  --text-muted: var(--light-muted);
  --primary: var(--light-accent);
  --primary-strong: var(--light-accent-strong);
  --outline: var(--light-line);
  --ink-rgb: 28, 41, 44;
  --gold-rgb: 155, 96, 60;
}

html[data-theme="light"] body {
  background: var(--light-canvas) !important;
  color: var(--light-ink) !important;
}

html[data-theme="light"] :where(
  .trust-bar,
  #services,
  .work-pricing-section,
  .workflow-block,
  #faq,
  .service-archive-page,
  .service-detail-page,
  .legal-page,
  .subscription-plans-section,
  .subscription-faq-section
) {
  background-color: var(--light-canvas) !important;
}

html[data-theme="light"] :where(
  .doubts-section,
  #popular,
  .articles-home-section,
  .pricing-page,
  .contacts-page,
  .subscription-benefits,
  .pricing-toc
) {
  background-color: var(--light-section) !important;
}

html[data-theme="light"] :where(
  #about,
  .reasons-block,
  .pricing-block,
  .article-archive-page,
  .article-detail-page,
  .subscription-hero,
  .subscription-comparison-section
) {
  background-color: var(--light-elevated) !important;
}

/* All reading surfaces share one calm card color; hierarchy comes from placement. */
html[data-theme="light"] :where(
  .area-card,
  .reason-item,
  .list-card,
  .case-card,
  .service-directory-card,
  .service-info-card,
  .subscription-plan,
  .subscription-faq-list details,
  .article-card,
  .pricing-decision-card,
  .pricing-format-card,
  .pricing-service-item,
  .contact-form,
  .contact-dialog-panel
) {
  background: var(--light-card) !important;
  border-color: var(--light-line) !important;
  color: var(--light-ink) !important;
  box-shadow: 0 14px 32px rgba(28, 41, 44, 0.07) !important;
}

/* Tables need a quieter rhythm than cards: frame > header > row > hover. */
html[data-theme="light"] :where(.pricing-table, .subscription-table-wrap, table) {
  background: var(--light-elevated) !important;
  border-color: var(--light-line) !important;
}

html[data-theme="light"] :where(table thead, .pricing-table-head, .subscription-table-head) {
  background: var(--light-ink) !important;
  color: #ffffff !important;
}

html[data-theme="light"] :where(table tbody tr, .pricing-table-row, .subscription-table-row) {
  background: var(--light-card) !important;
  border-color: var(--light-line) !important;
}

html[data-theme="light"] :where(table tbody tr:nth-child(even), .pricing-table-row:nth-child(even), .subscription-table-row:nth-child(even)) {
  background: var(--light-card-soft) !important;
}

html[data-theme="light"] :where(table tbody tr:hover, .pricing-table-row:hover, .subscription-table-row:hover) {
  background: var(--light-accent-wash) !important;
}

html[data-theme="light"] :where(a, button, .material-symbols-outlined) {
  --focus-ring-color: var(--light-accent);
}

html[data-theme="light"] :where(.section-kicker, .card-kicker, .article-card-category, .pricing-category-nav a.is-active) {
  color: var(--light-accent-strong) !important;
}

html[data-theme="light"] :where(.button-primary, .cta-button, .form-submit, .pricing-cta, .contact-submit) {
  background: var(--light-accent-strong) !important;
  border-color: var(--light-accent-strong) !important;
  color: #ffffff !important;
}

html[data-theme="light"] :where(.button-primary:hover, .button-primary:focus-visible, .cta-button:hover, .cta-button:focus-visible, .form-submit:hover, .form-submit:focus-visible, .pricing-cta:hover, .pricing-cta:focus-visible, .contact-submit:hover, .contact-submit:focus-visible) {
  background: var(--light-accent) !important;
  border-color: var(--light-accent) !important;
}

html[data-theme="light"] :where(input, textarea, select) {
  background: var(--light-card-soft) !important;
  border-color: var(--light-line) !important;
  color: var(--light-ink) !important;
}

html[data-theme="light"] :where(input:focus, textarea:focus, select:focus) {
  border-color: var(--light-accent) !important;
  box-shadow: 0 0 0 3px rgba(155, 96, 60, 0.14) !important;
}

/* The legacy light-reference layer uses html.light[data-theme] selectors.
 * Match that specificity so this final system is the actual source of truth. */
html.light[data-theme="light"] {
  --page-bg: var(--light-canvas) !important;
  --surface: var(--light-card) !important;
  --surface-low: var(--light-section) !important;
  --surface-container: var(--light-elevated) !important;
  --surface-high: var(--light-card) !important;
  --surface-variant: var(--light-card-soft) !important;
  --text: var(--light-ink) !important;
  --text-muted: var(--light-muted) !important;
  --primary: var(--light-accent) !important;
  --primary-strong: var(--light-accent-strong) !important;
}

html.light[data-theme="light"] body,
html.light[data-theme="light"] body p,
html.light[data-theme="light"] body button,
html.light[data-theme="light"] body input,
html.light[data-theme="light"] body textarea,
html.light[data-theme="light"] body select {
  font-family: var(--font-body) !important;
}

html.light[data-theme="light"] body h1,
html.light[data-theme="light"] body h2,
html.light[data-theme="light"] body h3,
html.light[data-theme="light"] body h4,
html.light[data-theme="light"] body .brand,
html.light[data-theme="light"] body .hero-brand,
html.light[data-theme="light"] body .brand-splash__name {
  font-family: var(--font-display) !important;
}

html.light[data-theme="light"] body {
  background: var(--light-canvas) !important;
  color: var(--light-ink) !important;
}

/* Pricing page: navigation is a guide rail, not a stack of cards. */
html.light[data-theme="light"] body .pricing-toc,
html.light[data-theme="light"] body .service-direction-nav,
html.light[data-theme="light"] body .pricing-category-nav {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.light[data-theme="light"] body .service-direction-nav {
  border-left: 1px solid var(--light-line) !important;
}

html.light[data-theme="light"] body .service-direction-nav .service-direction-link,
html.light[data-theme="light"] body .service-direction-nav .service-direction-all,
html.light[data-theme="light"] body .pricing-category-nav a {
  border: 0 !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--light-muted) !important;
}

html.light[data-theme="light"] body .service-direction-nav .service-direction-link:hover,
html.light[data-theme="light"] body .service-direction-nav .service-direction-link:focus-visible,
html.light[data-theme="light"] body .service-direction-nav .service-direction-link.is-active,
html.light[data-theme="light"] body .service-direction-nav .service-direction-all:hover,
html.light[data-theme="light"] body .service-direction-nav .service-direction-all:focus-visible,
html.light[data-theme="light"] body .pricing-category-nav a:hover,
html.light[data-theme="light"] body .pricing-category-nav a:focus-visible,
html.light[data-theme="light"] body .pricing-category-nav a.is-active {
  border-left-color: var(--light-accent) !important;
  background: rgba(155, 96, 60, 0.07) !important;
  color: var(--light-ink) !important;
  box-shadow: none !important;
}

/* Section/category headings sit on the page canvas; only typography separates them. */
html.light[data-theme="light"] body .pricing-direction-header,
html.light[data-theme="light"] body .pricing-category header {
  border: 0 !important;
  border-bottom: 1px solid var(--light-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.light[data-theme="light"] body .pricing-direction-header {
  padding-inline: 0 !important;
}

/* Pricing rows and option tables stay neutral; bronze is reserved for prices and actions. */
html.light[data-theme="light"] body .pricing-category,
html.light[data-theme="light"] body .pricing-service-list,
html.light[data-theme="light"] body .pricing-options {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.light[data-theme="light"] body .pricing-page .pricing-service-item,
html.light[data-theme="light"] body .pricing-page .pricing-options-head,
html.light[data-theme="light"] body .pricing-page .pricing-option-row,
html.light[data-theme="light"] body .pricing-page .pricing-option-value,
html.light[data-theme="light"] body .pricing-page .pricing-option-name,
html.light[data-theme="light"] body .pricing-page .pricing-option-details,
html.light[data-theme="light"] body .pricing-page .pricing-option-includes {
  background: #ffffff !important;
  background-image: none !important;
  border-color: var(--light-line) !important;
  box-shadow: none !important;
}

html.light[data-theme="light"] body .pricing-page .pricing-options-head {
  background: var(--light-card-soft) !important;
  color: var(--light-accent-strong) !important;
}

html.light[data-theme="light"] body .pricing-page .pricing-option-row:nth-child(even),
html.light[data-theme="light"] body .pricing-page .pricing-service-item:nth-child(even) {
  background: #fbfcfb !important;
}

html.light[data-theme="light"] body .pricing-page .pricing-service-item:hover,
html.light[data-theme="light"] body .pricing-page .pricing-option-row:hover {
  background: var(--light-accent-wash) !important;
}