/* Bento Quiet — light quiet bento: ink #1a1d24, surface #f4f3ef, accent #9CD5D4.
   Brand SoT: paint-bound hex in :root. Closed DS: Save paint writes isolated copy only.
   Source DESIGN: PATTERN-bento-quiet.md (W31 new_theme). */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  --primary-hover-fill: #9CD5D4;
  --primary-fill: #9CD5D4;
  --primary: #9CD5D4;
  --secondary: #9CD5D4;
  --accent: #9CD5D4;
  --text-primary: #1a1d24;
  --text-secondary: #6b6f78;
  --bg-color: #f4f3ef;
  --bg-secondary: #ffffff;
  --surface-mid: #ffffff;
  --surface-input: #ffffff;
  --surface-muted: #f4f3ef;
  --surface-inverse: #1a1d24;
  --accent-contrast: #1a1d24;
  --border-color: #dcdad4;
  --border-accent-strong: rgba(156, 213, 212, 0.35);
  --border-muted: rgba(26, 29, 36, 0.1);
  --border-hairline: #dcdad4;
  --accent-soft: rgba(156, 213, 212, 0.12);
  --shadow-cta-hover: rgba(156, 213, 212, 0.28);
  --shadow-deep: rgba(26, 29, 36, 0.1);
  --shadow-s-raw: rgba(26, 29, 36, 0.04);
  --shadow-m-raw: rgba(26, 29, 36, 0.08);
  --error: #c45c5c;
  --error-border: rgba(196, 92, 92, 0.7);
  --error-ring: rgba(196, 92, 92, 0.18);
  --font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-display-weight: 600;
  --font-label-size: 0.6875rem;
  --font-label-weight: 600;
  --font-label-tracking: 0.14em;
  --border-radius: 16px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow: rgba(26, 29, 36, 0.04) 0 1px 0 inset,
    rgba(26, 29, 36, 0.06) 0 0 0 1px;
  --shadow-button: rgba(156, 213, 212, 0.22) 0 6px 18px -6px;
  --focus-ring: #9CD5D4;
  --transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  --bg-mesh: var(--bg-color);
  --bg-radial-tr: var(--bg-mesh);
  --bg-radial-tl-section: var(--bg-mesh);
  --bg-radial-card: var(--bg-secondary);
  --state-hover-wash: rgba(156, 213, 212, 0.1);
  --state-disabled-opacity: 0.5;
  --density-control-y: 11px;
  --density-control-x: 22px;
  --motion-duration: 0.2s;
  --elevation-1: var(--shadow);
  --elevation-2: 0 12px 28px var(--shadow-m-raw);
  --content-max: 66ch;
  --layout-container-max-width: 1280px;
  --wcag-focus-offset: 3px;
  --chart-bar-radius: 4px;
  --chart-bar-gap: 12px;
  --chart-stroke: 1.5px;
  --chart-fill-opacity: 0.12;
  --title-tracking: -0.025em;
  --title-leading: 1.08;
  --body-size: 0.9375rem;
  --body-leading: 1.6;
}

.bento_quiet-theme {
  --theme-primary: var(--primary);
  --theme-secondary: var(--secondary);
  --theme-accent: var(--accent);
}

:root {
  --bulma-primary: var(--primary);
  --bulma-link: var(--accent);
  --bulma-info: var(--accent);
  --bulma-danger: var(--error);
}

body.bento_quiet-theme {
  color: var(--text-primary);
  background-color: var(--bg-color);
  background-image: var(--bg-mesh);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-leading);
}

body.bento_quiet-theme,
#blocks-canvas.bento_quiet-theme {
  --semantic-accent-primary: var(--primary);
  --semantic-accent-primary-hover: var(--secondary);
  --semantic-accent-soft: var(--accent-soft);
  --semantic-accent-contrast: var(--accent-contrast);
  --semantic-a11y-focus-ring-color: var(--focus-ring);
  --semantic-border-subtle: var(--border-hairline);
  --semantic-border-strong: var(--border-accent-strong);
  --semantic-surface-bg-base: var(--bg-color);
  --semantic-surface-bg-section: var(--bg-color);
  --semantic-surface-bg-elevated: var(--bg-secondary);
  --semantic-surface-bg-muted: var(--surface-muted);
  --semantic-surface-bg-card: var(--surface-mid);
  --semantic-surface-bg-dark: var(--surface-inverse);
  --semantic-surface-finish-warm_sand: var(--bg-secondary);
  --semantic-surface-finish-honey_glow: var(--surface-mid);
  --semantic-surface-finish-graphite_glass: var(--bg-secondary);
  --semantic-surface-finish-black_mirror: var(--surface-mid);
  --semantic-surface-finish-midnight_depth: var(--bg-color);
  --semantic-surface-inverse: var(--surface-inverse);
  --semantic-surface-on-inverse: var(--accent-contrast);
  --semantic-text-primary: var(--text-primary);
  --semantic-text-secondary: var(--text-secondary);
  --semantic-text-inverse: var(--accent-contrast);
  --semantic-typography-font-base: var(--font-body);
  --semantic-typography-font-title: var(--font-heading);
  --semantic-typography-font-subtitle: var(--font-body);
  --semantic-typography-ui-label-size: var(--font-label-size);
  --semantic-radius-s: var(--radius-sm);
  --semantic-radius-m: var(--radius-md);
  --semantic-radius-l: var(--radius-lg);
  --semantic-shadow-s: var(--elevation-1);
  --semantic-shadow-m: var(--elevation-2);
  --semantic-shadow-l: 0 24px 48px var(--shadow-deep);
  --component-button-radius-default: var(--radius-pill);
  --layout-container-max-width: 1280px;
}

/* Headlines — Plus Jakarta Sans / w600 / tight tracking.
   kit_hero__title excluded: PE design.title_font_token owns --kit-hero-title-font-family. */
body.bento_quiet-theme .kit-about__title,
body.bento_quiet-theme .kit-cta__title,
body.bento_quiet-theme .kit-benefits__title,
body.bento_quiet-theme .kit-service__title,
body.bento_quiet-theme .kit-pricing__title,
body.bento_quiet-theme .kit-testimonials__title,
body.bento_quiet-theme .kit-faq__title,
body.bento_quiet-theme .kit-contacts__title,
body.bento_quiet-theme .kit-booking__title,
body.bento_quiet-theme .kit-portfolio__title,
body.bento_quiet-theme .kit-certificates__title,
body.bento_quiet-theme .kit-timeline__title,
body.bento_quiet-theme .kit-navbar__brand {
  font-family: var(--font-heading);
  font-weight: var(--font-display-weight);
  letter-spacing: var(--title-tracking);
  line-height: var(--title-leading);
}

/* Eyebrows / metadata — JetBrains Mono uppercase */
body.bento_quiet-theme .kit-about__eyebrow,
body.bento_quiet-theme .kit-benefits__label,
body.bento_quiet-theme .kit-booking__field-label,
body.bento_quiet-theme .kit-booking__price-session-label,
body.bento_quiet-theme .kit-booking__price-breakdown-label,
body.bento_quiet-theme .kit-contact-form__label,
body.bento_quiet-theme .stat-label,
body.bento_quiet-theme .mono,
body.bento_quiet-theme code,
body.bento_quiet-theme kbd {
  font-family: var(--font-mono);
  font-size: var(--font-label-size);
  font-weight: var(--font-label-weight);
  letter-spacing: var(--font-label-tracking);
  text-transform: uppercase;
  color: var(--primary);
}

body.bento_quiet-theme .button.is-primary,
body.bento_quiet-theme .btn-primary,
body.bento_quiet-theme .kit-hero__cta,
body.bento_quiet-theme .kit-about__cta,
body.bento_quiet-theme .kit-cta__button {
  background: var(--primary);
  border: none;
  border-radius: var(--radius-pill);
  color: var(--accent-contrast);
  box-shadow: var(--shadow-button);
  padding: var(--density-control-y) var(--density-control-x);
  font-weight: 600;
}

body.bento_quiet-theme .button.is-primary:hover,
body.bento_quiet-theme .btn-primary:hover,
body.bento_quiet-theme .kit-hero__cta:hover,
body.bento_quiet-theme .kit-about__cta:hover,
body.bento_quiet-theme .kit-cta__button:hover {
  background: var(--secondary);
  box-shadow: 0 10px 24px var(--shadow-cta-hover);
}

body.bento_quiet-theme :where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: var(--wcag-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  body.bento_quiet-theme * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}