/*
  Rabbi On Demand Design System
  Shared brand and interface foundation for Rabbi On Demand products.

  Source of truth:
  /Users/yossi/Projects/Branding

  Consumers should import this file from their app, usually through a static
  route such as /branding/design-system/rabbi-on-demand.css.
*/

:root {
  color-scheme: light;

  /* Brand palette, derived from the official Rabbi On Demand website and wordmark. */
  --rod-ink: #263334;
  --rod-ink-soft: #384647;
  --rod-charcoal: #404040;
  --rod-navy: #005e5e;
  --rod-navy-2: #008081;
  --rod-navy-soft: #003f42;
  --rod-muted: #5d6868;
  --rod-muted-green: #5d6868;
  --rod-paper: #fefcf8;
  --rod-surface: #ffffff;
  --rod-cream: #f8f1e4;
  --rod-bg: #fefcf8;
  --rod-warm: #efe2c8;
  --rod-line: #e9dcc4;
  --rod-line-strong: #d7c39c;
  --rod-gold: #c9b690;
  --rod-gold-2: #fce4b4;
  --rod-gold-soft: #fff5dc;
  --rod-teal: #008081;
  --rod-teal-deep: #005e5e;
  --rod-teal-bright: #009899;
  --rod-teal-soft: #e6f4f2;
  --rod-teal-mist: #f1fbfa;
  --rod-sage: #68775f;
  --rod-rose-soft: #fff0e8;
  --rod-danger: #9f2d25;
  --rod-danger-soft: #fff0ed;
  --rod-success: #005e5e;
  --rod-success-soft: #e6f4f2;
  --rod-warning: #9d762c;
  --rod-warning-soft: #fff5dc;
  --rod-info: #005e5e;
  --rod-info-soft: #e6f4f2;

  /* Shared asset URLs. Apps should expose /branding as a static alias to this folder. */
  --rod-logo-url: url('/branding/logos/rabbi-on-demand.png');
  --rod-mishpacha-logo-url: url('/branding/logos/Mishpacha%20logo.png');

  /* Typography. We keep a modern app font and do not copy the website typography. */
  --rod-font-heading: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rod-font-body: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rod-font-icon: "Material Symbols Outlined";
  --rod-text-xs: 11px;
  --rod-text-sm: 13px;
  --rod-text-md: 15px;
  --rod-text-lg: 17px;
  --rod-text-xl: 21px;
  --rod-leading-tight: 1.05;
  --rod-leading-copy: 1.65;

  /* Spacing scale */
  --rod-space-1: 4px;
  --rod-space-2: 8px;
  --rod-space-3: 12px;
  --rod-space-4: 16px;
  --rod-space-5: 20px;
  --rod-space-6: 24px;
  --rod-space-7: 28px;
  --rod-space-8: 32px;
  --rod-space-10: 40px;
  --rod-space-12: 48px;
  --rod-space-16: 64px;

  /* Radius */
  --rod-radius-xs: 6px;
  --rod-radius-sm: 8px;
  --rod-radius-md: 12px;
  --rod-radius-lg: 16px;
  --rod-radius-xl: 18px;
  --rod-radius-2xl: 22px;
  --rod-radius-shell: 24px;
  --rod-radius-pill: 999px;

  /* Shadows */
  --rod-shadow-sm: 0 10px 28px rgba(0, 94, 94, 0.055);
  --rod-shadow-md: 0 14px 34px rgba(0, 94, 94, 0.08);
  --rod-shadow-lg: 0 18px 40px rgba(0, 94, 94, 0.09);
  --rod-shadow-xl: 0 24px 70px rgba(0, 94, 94, 0.14);
  --rod-focus: 0 0 0 3px rgba(0, 128, 129, 0.18);

  /* Compatibility aliases for current static apps. New code should prefer --rod-* tokens. */
  --ink: var(--rod-ink);
  --bg: var(--rod-bg);
  --surface: var(--rod-surface);
  --surface-soft: #f5ead4;
  --navy: var(--rod-navy);
  --navy-soft: var(--rod-navy-soft);
  --primary: var(--rod-navy-2);
  --primary-soft: var(--rod-teal-soft);
  --primary-chat: var(--rod-teal-deep);
  --muted: var(--rod-muted);
  --cream: var(--rod-cream);
  --paper: var(--rod-paper);
  --warm: var(--rod-warm);
  --gold: var(--rod-gold);
  --gold-soft: var(--rod-gold-soft);
  --line: var(--rod-line);
  --rose: var(--rod-rose-soft);
  --green: var(--rod-sage);
  --accent: var(--rod-sage);
  --teal: var(--rod-teal);
  --teal-soft: var(--rod-teal-soft);
  --sage-soft: var(--rod-teal-soft);
  --danger: var(--rod-danger);
  --shadow: var(--rod-shadow-lg);
  --soft-shadow: var(--rod-shadow-sm);
  --shadow-soft: var(--rod-shadow-sm);
  --premium-shadow: var(--rod-shadow-md);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--rod-ink);
  font-family: var(--rod-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
}

h1,
h2,
h3,
h4 {
  color: var(--rod-navy);
  letter-spacing: 0;
}

h1,
h2,
h3 {
  font-family: var(--rod-font-heading);
}

.material-symbols-outlined,
.rod-icon {
  font-family: var(--rod-font-icon);
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.brand,
.rod-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--rod-space-3);
  min-width: 0;
}

.mark,
.rod-mark,
.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: var(--rod-radius-sm);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--rod-navy);
  background: #ffffff;
  border: 1px solid rgba(0, 94, 94, 0.12);
  font-family: var(--rod-font-heading);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.rod-logo {
  display: block;
  width: 132px;
  max-width: 38vw;
  height: auto;
  object-fit: contain;
}

.rod-logo-mark {
  display: block;
  width: 86px;
  max-width: 30vw;
  height: auto;
  object-fit: contain;
}

.brand strong,
.rod-brand-name {
  color: var(--rod-navy);
  font-family: var(--rod-font-heading);
  font-weight: 700;
  line-height: 1;
}

.eyebrow,
.rod-eyebrow {
  margin: 0 0 var(--rod-space-2);
  color: var(--rod-navy);
  font-size: var(--rod-text-xs);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page,
.rod-page {
  width: min(1180px, calc(100% - 28px));
  margin-inline: auto;
}

.shell,
.rod-shell,
.rod-card,
.panel,
.primary-panel,
.subscription-card,
.subscribe-card,
.library-section,
.side-card,
.result-panel,
.phone-frame {
  border: 1px solid rgba(215, 195, 156, 0.64);
  background: rgba(254, 252, 248, 0.97);
  box-shadow: var(--rod-shadow-lg);
}

.rod-section {
  padding: clamp(var(--rod-space-7), 5vw, var(--rod-space-12));
}

.topbar,
.rod-topbar {
  border-bottom: 1px solid rgba(215, 195, 156, 0.58);
  background: rgba(254, 252, 248, 0.92);
  backdrop-filter: blur(14px);
}

.topbar-inner,
.rod-topbar-inner {
  width: min(1180px, calc(100% - 28px));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rod-space-4);
}

.rod-footer {
  border-top: 1px solid var(--rod-line);
  color: var(--rod-muted);
  background: rgba(254, 252, 248, 0.88);
}

.rod-footer-inner {
  width: min(1180px, calc(100% - 28px));
  margin-inline: auto;
  padding: var(--rod-space-6) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rod-space-4);
  flex-wrap: wrap;
}

.button,
.rod-button,
button.rod-button,
.top-link,
.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rod-space-2);
  min-height: 40px;
  border-radius: var(--rod-radius-pill);
  border: 1px solid var(--rod-navy-2);
  background: var(--rod-navy-2);
  color: #ffffff;
  padding: 0 15px;
  font-size: var(--rod-text-sm);
  font-weight: 800;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.button:hover,
.rod-button:hover,
.top-link:hover,
.text-button:hover,
.button:focus-visible,
.rod-button:focus-visible,
.top-link:focus-visible,
.text-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 94, 94, 0.1);
  outline: none;
}

.button.secondary,
.secondary,
.rod-button-secondary,
.text-button {
  background: rgba(254, 252, 248, 0.9);
  color: var(--rod-navy);
  border-color: rgba(0, 94, 94, 0.18);
}

.button.gold,
.rod-button-gold {
  background: var(--rod-gold-2);
  border-color: var(--rod-gold-2);
  color: var(--rod-navy);
}

.ask-link,
.rod-icon-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 94, 94, 0.16);
  border-radius: var(--rod-radius-md);
  color: var(--rod-navy);
  background: rgba(254, 252, 248, 0.86);
}

.rod-input,
input,
select,
textarea {
  border: 1px solid var(--rod-line-strong);
  background: #ffffff;
  color: var(--rod-ink);
  outline: none;
}

.rod-input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--rod-navy-2);
  box-shadow: var(--rod-focus);
}

.rod-field {
  display: grid;
  gap: var(--rod-space-2);
}

.rod-label {
  color: var(--rod-navy);
  font-size: var(--rod-text-sm);
  font-weight: 800;
}

.rod-help {
  color: var(--rod-muted);
  font-size: 12px;
  line-height: 1.45;
}

.rod-card,
.panel,
.metric-card,
.journey-card,
.pastoral-card,
.reflection-card {
  border-radius: var(--rod-radius-sm);
}

.rod-card {
  padding: var(--rod-space-5);
}

.pill,
.rod-badge,
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--rod-radius-pill);
  font-size: 12px;
  font-weight: 800;
}

.pill,
.rod-badge {
  border: 1px solid var(--rod-line);
  background: #f2f0eb;
  color: var(--rod-muted);
  padding: 3px 8px;
}

.rod-badge-success {
  border-color: rgba(0, 94, 94, 0.16);
  background: var(--rod-success-soft);
  color: var(--rod-success);
}

.rod-badge-warning {
  border-color: rgba(154, 106, 22, 0.18);
  background: var(--rod-warning-soft);
  color: var(--rod-warning);
}

.notice,
.rod-alert,
.rod-empty,
.empty {
  border: 1px solid rgba(0, 94, 94, 0.16);
  border-radius: var(--rod-radius-lg);
  background: var(--rod-teal-soft);
  color: var(--rod-ink-soft);
}

.rod-alert,
.rod-empty {
  display: flex;
  gap: var(--rod-space-3);
  align-items: flex-start;
  padding: 13px 15px;
  font-size: var(--rod-text-sm);
  line-height: 1.45;
}

.error,
.rod-alert-error {
  border-color: rgba(143, 29, 29, 0.16);
  background: var(--rod-danger-soft);
  color: var(--rod-danger);
}

.success,
.rod-alert-success {
  border-color: rgba(0, 94, 94, 0.16);
  background: var(--rod-success-soft);
  color: var(--rod-success);
}

.rod-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--rod-space-2);
  color: var(--rod-muted);
  font-size: var(--rod-text-sm);
  font-weight: 700;
}

.rod-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 94, 94, 0.16);
  border-top-color: var(--rod-navy-2);
  border-radius: 50%;
  animation: rod-spin 820ms linear infinite;
}

@keyframes rod-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 720px) {
  .rod-footer-inner,
  .topbar-inner,
  .rod-topbar-inner {
    align-items: flex-start;
  }

  .rod-footer-inner {
    flex-direction: column;
  }
}