@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&family=Cairo:wght@400;600;700&display=swap');

:root {
  color-scheme: light;

  --wr-color-petrol: #0E6E73;
  --wr-color-petrol-700: #0A565A;
  --wr-color-petrol-300: #3FA9A4;
  --wr-color-sand: #EADFD0;
  --wr-color-ember: #E86E2E;
  --wr-color-ink: #0F0F0F;
  --wr-color-graphite: #3D3D3D;
  --wr-color-cloud: #F6F7F8;
  --wr-color-white: #FFFFFF;
  --wr-color-border: #DDE3E6;

  --wr-font-display: 'Bricolage Grotesque', serif;
  --wr-font-sans: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wr-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --wr-font-arabic: 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif;

  --wr-bg: var(--wr-color-cloud);
  --wr-surface: var(--wr-color-white);
  --wr-surface-warm: var(--wr-color-sand);
  --wr-text: var(--wr-color-ink);
  --wr-text-muted: var(--wr-color-graphite);
  --wr-action: var(--wr-color-petrol);
  --wr-action-text-small: var(--wr-color-petrol-700);
  --wr-live: var(--wr-color-ember);
  --wr-border: var(--wr-color-border);

  --wr-radius-sm: 8px;
  --wr-radius-md: 14px;
  --wr-radius-lg: 22px;
  --wr-radius-xl: 32px;
  --wr-radius-pill: 999px;

  --wr-shadow-card: 0 16px 50px rgba(15,15,15,0.08);
  --wr-shadow-focus: 0 0 0 3px rgba(14,110,115,0.22);

  --wr-h1-size: clamp(2.45rem, 4.2vw, 2.875rem);
  --wr-h2-size: 1.875rem;
  --wr-h3-size: 1.25rem;
  --wr-body-size: 1rem;
}

[data-theme="dark"] {
  color-scheme: dark;
  --wr-bg: var(--wr-color-ink);
  --wr-surface: #171717;
  --wr-surface-warm: #211B16;
  --wr-text: #FFFFFF;
  --wr-text-muted: #CACACA;
  --wr-action: var(--wr-color-petrol-300);
  --wr-action-text-small: var(--wr-color-petrol-300);
  --wr-border: rgba(255,255,255,0.12);
  --wr-shadow-card: 0 20px 70px rgba(0,0,0,0.35);
}

html { font-family: var(--wr-font-sans); background: var(--wr-bg); color: var(--wr-text); }
body { margin: 0; background: var(--wr-bg); color: var(--wr-text); font-family: var(--wr-font-sans); font-size: var(--wr-body-size); line-height: 1.65; }
:where(h1, h2) { font-family: var(--wr-font-display); letter-spacing: -0.03em; margin: 0 0 0.35em; }
h1 { font-size: var(--wr-h1-size); line-height: 1.05; font-weight: 700; }
h2 { font-size: var(--wr-h2-size); line-height: 1.12; font-weight: 700; }
h3 { font: 600 var(--wr-h3-size)/1.28 var(--wr-font-sans); letter-spacing: -0.01em; margin: 0 0 0.45em; }
p { margin: 0 0 1rem; color: var(--wr-text-muted); }
a { color: var(--wr-action-text-small); text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }
[lang="ar"], [dir="rtl"] { font-family: var(--wr-font-arabic); }
[dir="rtl"] :where(h1, h2, h3, p, a, button, input, textarea) { letter-spacing: normal; }

.wr-label { font: 500 0.75rem/1.2 var(--wr-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wr-action-text-small); }
.wr-card { background: var(--wr-surface); border: 1px solid var(--wr-border); border-radius: var(--wr-radius-lg); box-shadow: var(--wr-shadow-card); }
.wr-button { appearance: none; border: 0; border-radius: var(--wr-radius-pill); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; padding: 0.72rem 1.12rem; font: 600 0.96rem/1 var(--wr-font-sans); cursor: pointer; transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease; }
.wr-button:focus-visible { outline: none; box-shadow: var(--wr-shadow-focus); }
.wr-button:hover { transform: translateY(-1px); }
.wr-button-primary { background: var(--wr-color-petrol); color: #FFFFFF; }
.wr-button-secondary { background: var(--wr-surface); color: var(--wr-color-petrol-700); border: 1px solid var(--wr-border); }
.wr-button-quiet { background: transparent; color: var(--wr-action-text-small); }
.wr-input { width: 100%; box-sizing: border-box; min-height: 46px; border-radius: var(--wr-radius-md); border: 1px solid var(--wr-border); background: var(--wr-surface); color: var(--wr-text); padding: 0.72rem 0.9rem; font: 400 1rem/1.2 var(--wr-font-sans); }
.wr-input:focus { outline: none; box-shadow: var(--wr-shadow-focus); border-color: var(--wr-color-petrol); }
.wr-badge { display: inline-flex; align-items: center; gap: 0.42rem; border-radius: var(--wr-radius-pill); padding: 0.32rem 0.62rem; font: 500 0.75rem/1 var(--wr-font-mono); letter-spacing: 0.08em; text-transform: lowercase; }
.wr-badge[data-tone="responding"] { color: var(--wr-color-ember); background: rgba(232,110,46,0.09); }
.wr-badge[data-tone="calm"] { color: var(--wr-color-petrol-700); background: rgba(14,110,115,0.08); }
.wr-shell { min-height: 100vh; background: radial-gradient(circle at 20% 0%, rgba(232,110,46,0.10), transparent 28%), radial-gradient(circle at 72% 12%, rgba(14,110,115,0.14), transparent 31%), var(--wr-bg); }