/*
 * GOC home page: Option B "Midnight & Mineral"
 * Source: OPTION_B_DESIGN_SYSTEM_STANDALONE.md, sections requested:
 *   1 Typography & font sizes   2 Color palette
 *   3 Hover & interactive states   4 Boxes, cards & frames   5 Action buttons
 *
 * Scope: add class="theme-option-b" to the home page root (src/app/page.tsx).
 * Class names follow GOC_BENTO_UI_DESIGN_SYSTEM.md (.bento-card, .primary-button,
 * .modal-*, .card-visual-wrapper); the rest are the spec's own names and must be
 * matched to the real markup once the code is available.
 */

/* ───────────── 2. Color palette ───────────── */
.theme-option-b {
  --ink: #102535;
  --muted: #536773;
  --paper: #ffffff;
  --soft: #f7fafb;
  --line: #e2eaed;
  --line-strong: #cfdae0;
  --blue: #075d78;
  --blue-hover: #0b718f;
  --blue-active: #054e64;
  --navy: #071b2b;
  --navy-2: #0d2a3d;
  --cyan: #62c5d0;
  --gold: #a77b3f;
  --inverse: #f7fafb;
  --inverse-muted: #b6c3c9;
  --success: #286a52;
  --error: #a33f3a;
  --focus: rgba(7, 93, 120, 0.42);
  --hover-border: rgba(7, 93, 120, 0.45);
  --placeholder: #8aa0aa;
  --icon-quiet: #7e949e;
  --tint: #eef4f6;
  --band: #f2f5f6;

  --shadow-rest: 0 1px 2px rgba(16, 37, 53, 0.05);
  --shadow-hover: 0 4px 14px rgba(16, 37, 53, 0.08);
  --shadow-press: 0 2px 8px rgba(16, 37, 53, 0.06);
  --shadow-dialog: 0 18px 44px rgba(7, 27, 43, 0.22);
  --veil: linear-gradient(200deg, rgba(7, 27, 43, 0.3), rgba(7, 27, 43, 0.62) 82%);

  /* Live token names re-pointed so existing components pick up Option B */
  --bg-canvas: var(--paper);
  --bg-card: var(--soft);
  --text-primary: var(--ink);
  --text-secondary: var(--muted);
  --accent-blue: var(--blue);
  --accent-blue-hover: var(--blue-hover);
  --border-color: var(--line);
  --blue-pale: var(--tint);
  --cyan-pale: var(--tint);

  /* ───────────── 1. Typography ───────────── */
  --font-heading: "Google Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-arabic: "Inter", "Noto Sans Arabic", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

.theme-option-b :is(h1, h2, h3, h4, .btn, .brand, .card-action, .primary-button) {
  font-family: var(--font-heading);
}
[dir="rtl"] .theme-option-b,
[dir="rtl"] .theme-option-b :is(h1, h2, h3) {
  font-family: var(--font-arabic);
  letter-spacing: -0.01em; /* spec: never tighter than -0.01em in Arabic */
}

.theme-option-b .eyebrow      { font: 600 12px/1.4 var(--font-body); letter-spacing: 0.045em; color: var(--blue); }
.theme-option-b .hero-eyebrow { font: 600 11px/1.4 var(--font-body); letter-spacing: 0.11em; color: var(--muted); }
.theme-option-b .hero h1      { font: 500 clamp(52px, 7.2vw, 92px)/0.99 var(--font-heading); letter-spacing: -0.065em; color: var(--ink); }
.theme-option-b .hero-lead    { font: 400 clamp(18px, 2vw, 23px)/1.35 var(--font-heading); letter-spacing: -0.025em; color: var(--ink); }
.theme-option-b .hero-description { font: 400 15px/1.58 var(--font-body); color: var(--muted); }
.theme-option-b .accent       { color: var(--blue); } /* one accent phrase per viewport */

.theme-option-b .section-title   { font: 500 clamp(38px, 5.5vw, 64px)/1.04 var(--font-heading); letter-spacing: -0.06em; color: var(--ink); }
.theme-option-b .section-support { font: 400 16px/1.55 var(--font-body); color: var(--muted); }

.theme-option-b .slider-kicker      { font: 700 10px/1.35 var(--font-body); letter-spacing: 0.12em; color: rgba(247, 250, 251, 0.82); }
.theme-option-b .slider-title       { font: 500 clamp(24px, 3.4vw, 42px)/1.05 var(--font-heading); letter-spacing: -0.05em; color: var(--inverse); }
.theme-option-b .slider-description { font: 400 12px/1.5 var(--font-body); color: rgba(247, 250, 251, 0.78); }

.theme-option-b .card-label          { font: 700 10px/1.35 var(--font-body); letter-spacing: 0.12em; color: var(--muted); }
.theme-option-b .card-label--dark    { color: rgba(247, 250, 251, 0.82); }
.theme-option-b .bento-card h3       { font: 500 28px/1.05 var(--font-heading); letter-spacing: -0.055em; color: var(--ink); }
.theme-option-b .card-support        { font: 400 12px/1.5 var(--font-body); color: var(--muted); }
.theme-option-b .feature-card h2,
.theme-option-b .feature-card h3     { font: 500 clamp(34px, 4vw, 49px)/1.02 var(--font-heading); letter-spacing: -0.06em; color: var(--inverse); }
.theme-option-b .feature-card p      { font: 400 14px/1.5 var(--font-body); color: rgba(247, 250, 251, 0.84); }
.theme-option-b .row-title           { font: 500 13px/1.2 var(--font-heading); color: var(--ink); }
.theme-option-b .row-support         { font: 400 9px/1.25 var(--font-body); color: var(--muted); }
.theme-option-b .solution-card h3    { font: 500 22px/1.1 var(--font-heading); letter-spacing: -0.045em; color: var(--ink); }
.theme-option-b .solution-card p     { font: 400 12px/1.48 var(--font-body); color: var(--muted); }

.theme-option-b .opportunity h2   { font: 500 clamp(40px, 5vw, 60px)/1.02 var(--font-heading); letter-spacing: -0.06em; color: var(--ink); }
.theme-option-b .opportunity p    { font: 400 15px/1.55 var(--font-body); color: var(--muted); }
.theme-option-b .pathway-tile     { font: 500 12px/1.28 var(--font-heading); color: var(--ink); }
.theme-option-b .form-title       { font: 600 15px/1.3 var(--font-heading); color: var(--ink); }
.theme-option-b label             { font: 500 11px/1.4 var(--font-body); color: var(--muted); }
.theme-option-b :is(input, select, textarea) { font: 400 13px/1.5 var(--font-body); color: var(--ink); }
.theme-option-b ::placeholder     { color: var(--placeholder); }
.theme-option-b .consent          { font: 400 10px/1.45 var(--font-body); color: var(--muted); }

.theme-option-b .modal-container h2 { font: 500 clamp(29px, 5vw, 39px)/1.07 var(--font-heading); letter-spacing: -0.055em; color: var(--ink); }
.theme-option-b .modal-lead         { font: 400 17px/1.45 var(--font-heading); color: var(--ink); }
.theme-option-b .modal-body         { font: 400 14px/1.62 var(--font-body); color: var(--muted); }

.theme-option-b .site-header .brand       { font: 700 24px/1 var(--font-heading); letter-spacing: -0.09em; color: var(--inverse); }
.theme-option-b .site-header nav a        { font: 500 12px/1.4 var(--font-body); color: var(--inverse); }
.theme-option-b .site-footer .statement   { font: 400 21px/1.25 var(--font-heading); letter-spacing: -0.035em; color: var(--inverse); }
.theme-option-b .site-footer a            { font: 400 12px/1.45 var(--font-body); color: var(--inverse-muted); }
.theme-option-b .site-footer small        { font: 400 10px/1.45 var(--font-body); color: var(--inverse-muted); }

/* ───────────── 4. Boxes, cards & frames ───────────── */
.theme-option-b .container { width: min(100% - 48px, 1200px); margin-inline: auto; }

.theme-option-b .site-header {
  height: 64px;
  background: rgba(7, 27, 43, 0.82);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(247, 250, 251, 0.16);
}
.theme-option-b .site-footer {
  background: var(--navy);
  color: var(--inverse);
  border-top: 1px solid rgba(247, 250, 251, 0.16);
}

.theme-option-b .bento-grid { gap: 20px; }
.theme-option-b .bento-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  background: var(--paper);
  box-shadow: var(--shadow-rest);
}
.theme-option-b .bento-card--grouped { background: var(--soft); }
.theme-option-b :is(.feature-card, .hero-slide) { background: var(--navy); }
.theme-option-b :is(.feature-card, .hero-slide)::after {
  content: ""; position: absolute; inset: 0; background: var(--veil); pointer-events: none;
}
.theme-option-b .amanah-card { background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: var(--inverse); }
.theme-option-b .card-visual-wrapper { border-radius: 10px; background: var(--soft); }
.theme-option-b .card-visual { transform: none !important; }

.theme-option-b .icon-tile      { width: 30px; height: 30px; border-radius: 10px; background: var(--tint); border: 1px solid var(--line-strong); color: var(--blue); }
.theme-option-b .pillar-row     { min-height: 60px; border-radius: 10px; background: rgba(255, 255, 255, 0.84); border: 1px solid transparent; color: var(--ink); }
.theme-option-b .capability-tile{ min-height: 103px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.theme-option-b :is(.status-chip, .market-chip) { border-radius: 10px; background: var(--paper); border: 1px solid var(--line-strong); }
.theme-option-b .status-chip    { color: var(--muted); }
.theme-option-b .market-chip    { color: var(--ink); }
.theme-option-b :is(.ecosystem-core, .market-center) { border-radius: 50%; background: var(--blue); color: var(--inverse); }
.theme-option-b .orbit          { border: 1px dashed rgba(7, 93, 120, 0.28); border-radius: 50%; }
.theme-option-b .pathway-tile   { min-height: 53px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
.theme-option-b .opportunity    { background: var(--band); padding-block: 106px; }
.theme-option-b .form-card      { border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.theme-option-b :is(input, select, textarea) {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; padding-block: 10px;
}

.theme-option-b .modal-overlay   { background: rgba(7, 27, 43, 0.62); backdrop-filter: blur(8px); }
.theme-option-b .modal-container { max-width: 600px; border-radius: 18px; padding: 43px; background: var(--paper); box-shadow: var(--shadow-dialog); }
.theme-option-b .modal-close     { width: 36px; height: 36px; border-radius: 50%; background: var(--soft); color: var(--ink); }

/* ───────────── 5. Action buttons ───────────── */
.theme-option-b :is(.primary-button, .btn-primary, .header-cta, button[type="submit"]) {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 12px 22px; min-height: 44px;
  background: var(--blue); color: var(--inverse);
  font: 500 14px/1 var(--font-heading);
  box-shadow: none; transform: none;
  transition: background-color 0.2s ease;
}
.theme-option-b .header-cta { font-size: 12px; min-height: 36px; padding: 9px 16px; }
.theme-option-b :is(.primary-button, .btn-primary, .header-cta, button[type="submit"]):hover  { background: var(--blue-hover); box-shadow: none; transform: none; }
.theme-option-b :is(.primary-button, .btn-primary, .header-cta, button[type="submit"]):active { background: var(--blue-active); box-shadow: none; transform: none; }
.theme-option-b :is(.primary-button, .btn-primary, button[type="submit"]):disabled { opacity: 0.6; cursor: wait; }

.theme-option-b .btn-secondary {
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 11px 21px;
  background: transparent; color: var(--blue);
  font: 500 14px/1 var(--font-heading);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.theme-option-b .btn-secondary:hover  { border-color: var(--blue); background: var(--soft); }
.theme-option-b .btn-secondary:active { background: var(--tint); }

.theme-option-b :is(.text-link, .secondary-link, .card-action) { color: var(--blue); font: 500 14px/1.2 var(--font-heading); transition: color 0.2s ease; }
.theme-option-b .card-action { font-size: 13px; }
.theme-option-b :is(.feature-card, .amanah-card) .card-action { color: var(--inverse); }
.theme-option-b :is(.text-link, .secondary-link, .card-action):hover { color: var(--blue-hover); }

.theme-option-b :is(.icon-disc, .solution-action, .back-to-top) {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--blue); color: var(--inverse); transition: background-color 0.2s ease;
}
.theme-option-b :is(.icon-disc, .solution-action, .back-to-top):hover  { background: var(--blue-hover); }
.theme-option-b :is(.icon-disc, .solution-action, .back-to-top):active { background: var(--blue-active); }

/* The arrow glyph is the only thing that moves: 2px toward reading direction */
.theme-option-b .arrow { display: inline-block; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.theme-option-b :is(a, button):hover .arrow { transform: translateX(2px); }
[dir="rtl"] .theme-option-b :is(a, button):hover .arrow { transform: translateX(-2px); }

/* ───────────── 3. Hover & interactive states ───────────── */
.theme-option-b .bento-card { transition: border-color 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease; }
.theme-option-b .bento-card:hover  { border-color: var(--hover-border); box-shadow: var(--shadow-hover); }
.theme-option-b .bento-card:active { box-shadow: var(--shadow-press); }
.theme-option-b .bento-card :is(h2, h3, p) { transform: none !important; transition: color 0.2s ease; }
.theme-option-b .bento-card:hover h3 { color: var(--blue); }
.theme-option-b :is(.feature-card, .amanah-card):hover :is(h2, h3) { color: var(--inverse); }

.theme-option-b .pillar-row:hover      { background: var(--paper); border-color: rgba(7, 93, 120, 0.35); }
.theme-option-b .capability-tile:hover { background: var(--soft); border-color: var(--hover-border); }
.theme-option-b .popover-row:hover     { background: var(--tint); color: var(--blue); }
.theme-option-b .modal-close:hover     { background: #e6eef1; }
.theme-option-b :is(input, select, textarea):focus { outline: none; border-bottom-color: var(--blue); }
.theme-option-b input[type="checkbox"] { accent-color: var(--blue); }

/* Spec says cyan for 12px nav/footer hovers, but its own rule 6 bans cyan at
   ≤14px. Following rule 6: Soft White + underline instead. */
.theme-option-b .site-header nav a:hover,
.theme-option-b .site-footer a:hover { color: var(--inverse); text-decoration: underline; text-underline-offset: 3px; }

.theme-option-b :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .theme-option-b *, .theme-option-b *::before, .theme-option-b *::after {
    transition-duration: 0.01ms !important;
  }
  .theme-option-b :is(a, button):hover .arrow { transform: none; }
}

/* ───────────── Responsive (spec §1.4, §4) ───────────── */
@media (max-width: 1024px) {
  .theme-option-b .site-header nav a { font-size: 11px; }
  .theme-option-b .header-cta { font-size: 11px; }
}
@media (max-width: 760px) {
  .theme-option-b .container { width: min(100% - 32px, 1200px); }
  .theme-option-b .site-header { height: 58px; }
  .theme-option-b .site-header nav a { font-size: 13px; }
  .theme-option-b .header-cta, .theme-option-b .slider-description { display: none; }
  .theme-option-b .hero-eyebrow { font-size: 9px; }
  .theme-option-b .hero h1 { font-size: clamp(42px, 11.6vw, 68px); }
  .theme-option-b .hero-lead { font-size: 18px; }
  .theme-option-b .hero-description { font-size: 14px; }
  .theme-option-b .section-title { font-size: clamp(37px, 10vw, 51px); }
  .theme-option-b .feature-card :is(h2, h3) { font-size: 35px; }
  .theme-option-b .bento-card h3 { font-size: 28px; }
  .theme-option-b .row-title { font-size: 12px; }
  .theme-option-b .solution-card h3 { font-size: 20px; }
  .theme-option-b .opportunity { padding-block: 78px; }
  .theme-option-b .opportunity h2 { font-size: 42px; }
  .theme-option-b .pathway-tile { font-size: 11px; min-height: 50px; }
  .theme-option-b .site-footer .statement { font-size: 19px; }
  .theme-option-b .modal-container h2 { font-size: 29px; }
  .theme-option-b .modal-container { padding: 35px 22px 25px; }
  .theme-option-b .bento-grid { gap: 12px; }
  .theme-option-b :is(.bento-card, .form-card) { border-radius: 16px; }
  .theme-option-b .bento-card { padding: 22px; }
  .theme-option-b .capability-tile { min-height: 94px; }
}
@media (max-width: 380px) {
  .theme-option-b .container { width: min(100% - 24px, 1200px); }
  .theme-option-b .hero h1 { font-size: 40px; }
  .theme-option-b .section-title { font-size: 40px; }
  .theme-option-b .feature-card :is(h2, h3) { font-size: 31px; }
  .theme-option-b .row-support { font-size: 8px; }
}