/* ==========================================================================
   Theme: swiss

   The Swiss / technical-report look of the Senior .NET REVIEW realm: white paper, near-black
   ink, one oxblood accent that follows the realm's hue, Helvetica, square corners, hairline rules
   and numbers in the margin. Ported from archetype/swiss.css, but self-contained: it needs no
   Swiss-only class and no archetype, only the semantic markup the blocks already have.

   Two kinds of rule, and nothing else:
   - tokens: the app's own colour tokens are set again inside the shell, so every utility a block
     uses (bg-primary, text-muted-foreground, border ...) takes the Swiss colours; and the --theme-*
     tokens the block styles read (docs/theming.md);
   - decorations: backgrounds and pseudo-elements that draw what the markup only names.
   Every rule is scoped to [data-theme="swiss"], so a page outside the shell is untouched.
   ========================================================================== */

[data-theme="swiss"] {
  color-scheme: light;

  /* Colour: the app's tokens, set again for everything inside the shell */
  --background: #ffffff;
  --foreground: #111111;
  --card: #ffffff;
  --card-foreground: #111111;
  --popover: #ffffff;
  --popover-foreground: #111111;
  --muted: #f4f4f4;
  --muted-foreground: #444444;
  --secondary: #f4f4f4;
  --secondary-foreground: #111111;
  --accent: #f4f4f4;
  --accent-foreground: #111111;
  --border: #e2e2e2;
  --input: #e2e2e2;
  --primary: oklch(0.44 0.13 var(--realm-hue, 20));
  --primary-foreground: #ffffff;
  --ring: oklch(0.44 0.13 var(--realm-hue, 20));

  /* Shape: square, as the reference is */
  --radius: 2px;

  /* Type */
  --theme-font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --theme-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The emphasis phrase: upright, in the accent, underlined */
  --theme-emphasis-font: inherit;
  --theme-emphasis-style: normal;
  --theme-emphasis-weight: inherit;
  --theme-emphasis-color: var(--primary);
  --theme-emphasis-decoration: underline 0.08em;
  --theme-emphasis-background: transparent;
  --theme-emphasis-padding: 0;
  --theme-emphasis-radius: 0;

  /* A card is a heavy rule over open text, not a box */
  --theme-card-gap: 0.625rem;
  --theme-card-padding: 1rem 0 0;
  --theme-card-border: 0;
  --theme-card-rule: 2px solid var(--foreground);
  --theme-card-radius: 0;
  --theme-card-background: transparent;

  /* Steps are numbered in the margin: large, accent, leading zero, no badge */
  --theme-number-style: decimal-leading-zero;
  --theme-number-suffix: "";
  --theme-number-size: 2.5rem;
  --theme-number-font-size: 2.25rem;
  --theme-number-radius: 0;
  --theme-number-background: transparent;
  --theme-number-color: var(--primary);

  /* Figures are big and in the accent */
  --theme-stat-size: 3rem;
  --theme-stat-color: var(--primary);

  /* A band is a dark block of ink with white type */
  --theme-band-padding: 3rem 2.5rem;
  --theme-band-radius: 0;
  --theme-band-background: var(--foreground);
  --theme-band-color: #ffffff;
  --theme-band-text-color: rgba(255, 255, 255, 0.8);

  /* A callout is open type beside a heavy accent rule, on a pale ground */
  --theme-callout-padding: 1.25rem 1.5rem;
  --theme-callout-border: 0;
  --theme-callout-rule: 4px solid var(--primary);
  --theme-callout-radius: 0;
  --theme-callout-background: var(--muted);

  /* Questions sit between ink rules; the marker is a plus and a dash */
  --theme-faq-rule: 1px solid var(--foreground);
  --theme-faq-marker-closed: "+";
  --theme-faq-marker-open: "\2013";

  /* The header closes with a heavy ink rule, the footer opens with a hairline */
  --theme-header-padding: 1.25rem 3.5rem;
  --theme-header-rule: 2px solid var(--foreground);
  --theme-header-background: var(--background);
  --theme-footer-padding: 3rem 3.5rem;
  --theme-footer-rule: 1px solid var(--border);
  --theme-footer-background: var(--background);
  --theme-footer-heading-tracking: 0.14em;
  --theme-footer-legal-rule: 1px solid var(--border);

  /* Posts sit between ink rules, like the questions of an FAQ */
  --theme-blog-rule: 1px solid var(--foreground);

  /* Form fields are square boxes outlined in ink */
  --theme-field-padding: 0.75rem 0.875rem;
  --theme-field-border: 1px solid var(--foreground);
  --theme-field-radius: 0;
  --theme-field-background: #ffffff;

  /* Tables are hairlines, with a heavy one under the headers */
  --theme-table-rule: 1px solid var(--border);
  --theme-table-head-rule: 2px solid var(--foreground);
}

/* ---------- headings and prose ---------- */

[data-theme="swiss"] h1,
[data-theme="swiss"] h2,
[data-theme="swiss"] h3,
[data-theme="swiss"] h4 {
  font-family: var(--theme-font-body);
  font-weight: 700;
  letter-spacing: -0.02em;
}
[data-theme="swiss"] .prose p,
[data-theme="swiss"] .prose li { color: var(--muted-foreground); }
[data-theme="swiss"] .prose a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- sections: a hairline rule between them ---------- */

[data-theme="swiss"] section {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid var(--border);
}
[data-theme="swiss"] section:last-of-type { border-bottom: 0; }

/* ---------- hero: left-aligned, with an accent tick before the eyebrow ---------- */

[data-theme="swiss"] .hero {
  text-align: left;
  padding-top: 3rem;
}
[data-theme="swiss"] .hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}
[data-theme="swiss"] .hero-eyebrow::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  background: var(--primary);
}
[data-theme="swiss"] .hero-heading {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 55rem;
}
[data-theme="swiss"] .hero-subheading {
  margin-left: 0;
  margin-right: 0;
  max-width: 38rem;
  font-size: 1.25rem;
  line-height: 1.5;
}
[data-theme="swiss"] .hero-actions { justify-content: flex-start; gap: 1.25rem; }

/* ---------- card lists ---------- */

[data-theme="swiss"] .card-list-title,
[data-theme="swiss"] .stat-strip-title {
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
[data-theme="swiss"] .card-list-items .card-title { font-size: 1.125rem; letter-spacing: -0.01em; }
[data-theme="swiss"] .card-list-items .card-badge { color: var(--primary); letter-spacing: 0.12em; }
[data-theme="swiss"] .card-list-items .card-code { border-radius: 0; }
[data-theme="swiss"] .card-list-numbered .card-list-items .card::before {
  line-height: 1;
  justify-content: flex-start;
  letter-spacing: -0.02em;
}

/* ---------- header and footer: a sticky header, a ring for a brand mark, accent on hover ---------- */

[data-theme="swiss"] .site-header {
  position: sticky;
  top: 0;
  z-index: 10;
}
[data-theme="swiss"] .site-brand-name { font-size: 1.1875rem; }
[data-theme="swiss"] .site-brand::before {
  /* A magnifier, drawn: a ring in the accent with a short handle. */
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 3px solid var(--primary);
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 62%, var(--primary) 62%, var(--primary) 78%, transparent 78%) no-repeat 100% 100% / 0.5rem 0.5rem;
}
[data-theme="swiss"] .site-nav { gap: 0.5rem 1.75rem; }
[data-theme="swiss"] .site-footer-heading { color: var(--primary); }
[data-theme="swiss"] .site-footer-main { max-width: 61.25rem; margin: 0 auto; }
[data-theme="swiss"] .site-footer-legal { max-width: 61.25rem; margin-left: auto; margin-right: auto; }

/* ---------- pricing extras and the contact form ---------- */

[data-theme="swiss"] .plan-kicker {
  color: var(--primary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}
[data-theme="swiss"] .plan { border-radius: 0; }
[data-theme="swiss"] .plan-price-fixed span:first-child { letter-spacing: -0.03em; }
[data-theme="swiss"] .pricing-footnote { text-align: left; }
[data-theme="swiss"] .contact-form-heading { font-size: 1.75rem; letter-spacing: -0.02em; line-height: 1.2; }
[data-theme="swiss"] .contact-form-field label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- call to action band: white type on ink, the second button an outline ---------- */

[data-theme="swiss"] .cta-band-heading {
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  color: #ffffff;
}
[data-theme="swiss"] .cta-band-text { font-size: 1.125rem; }
[data-theme="swiss"] .cta-band-actions a.border {
  background-color: transparent;
  color: #ffffff;
  border-color: #ffffff;
}
[data-theme="swiss"] .cta-band-actions a.border:hover { background-color: #ffffff; color: var(--foreground); }

/* ---------- callout: the title is small capitals in the accent ---------- */

[data-theme="swiss"] .callout-title {
  color: var(--primary);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- FAQ: heavy rule over the list, questions in bold ---------- */

[data-theme="swiss"] .faq-title { font-size: 1.75rem; letter-spacing: -0.02em; line-height: 1.2; }
[data-theme="swiss"] .faq-items { border-top-width: 2px; }
[data-theme="swiss"] .faq-question { font-size: 1.0625rem; padding: 1.125rem 0; }
[data-theme="swiss"] .faq-question::after { color: var(--primary); font-size: 1.25rem; font-weight: 400; }

/* ---------- comparison table: the group labels in the accent, the cells in tabular figures ---------- */

[data-theme="swiss"] .comparison-caption { font-size: 1.75rem; letter-spacing: -0.02em; line-height: 1.2; padding-bottom: 1rem; }
[data-theme="swiss"] .comparison-header {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[data-theme="swiss"] .comparison-group th { color: var(--primary); letter-spacing: 0.14em; }
[data-theme="swiss"] .comparison-cell { font-variant-numeric: tabular-nums; }

/* ---------- stat strips: an accent tick over each figure ---------- */

[data-theme="swiss"] .stat-strip-items .stat { gap: 0.375rem; }
[data-theme="swiss"] .stat-strip-items .stat::after {
  /* The stat runs bottom to top (column-reverse), so the last child is drawn first. */
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  background: var(--primary);
  margin-bottom: 0.5rem;
}
[data-theme="swiss"] .stat-strip-items .stat-value { letter-spacing: -0.03em; }
[data-theme="swiss"] .stat-strip-items .stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}