/* Shared semantic palette and foundations. Loaded after legacy theme CSS.
 * Keep dark foreground and background tokens separate; --nuqta-dark is a BG.
 * Component-specific layout/spacing remains in its owning stylesheet.
 */
:root {
  color-scheme: dark;
  --bg-page: #0b1020;
  --bg-section: #0e1625;
  --bg-surface: #101929;
  --bg-surface-elevated: #142031;
  --bg-interactive: #1d2c40;
  --bg-disabled: #253246;
  --bg-footer: #080e19;
  --bg-primary: var(--bg-page);
  --bg-secondary: var(--bg-section);
  --surface: var(--bg-surface);
  --surface-elevated: var(--bg-surface-elevated);
  --text-primary: #f0f4f8;
  --text-secondary: #b2bdcd;
  --text-muted: #97a7bc;
  --text-disabled: #b6c1cf;
  --text-on-accent: #071b16;
  --accent: #3dd6a0;
  --accent-fill: #10b981;
  --accent-ink: var(--text-on-accent);
  --accent-hover: #36d39f;
  --accent-active: #28c993;
  --accent-dim: #10b9811f;
  --accent-subtle: #10b9810d;
  --border-subtle: #223044;
  --border-default: #3b5069;
  --border-strong: #71849c;
  --border-accent: #568d7d;
  --bg-header: #0b1020f5;
  --border-header: #ffffff0b;
  --focus-ring: #72efc2;
  --success: #72e8b6;
  --success-text: #a2f3cd;
  --success-bg: #10382d;
  --success-border: #4bb58c;
  --warning: #f5cb75;
  --warning-text: #ffdda0;
  --warning-bg: #392d18;
  --warning-border: #c99f4b;
  --error: #ff929b;
  --error-text: #ffb8bf;
  --error-bg: #3b202c;
  --error-border: #dc8291;
  --selection-bg: #226d5c;
  --selection-text: #ffffff;
  /* Brand colors are explicit exceptions, always paired with dark ink. */
  --brand-whatsapp: #25d366;
  --brand-whatsapp-hover: #4cde84;
  /* Decorative layers never carry text or meaningful focus boundaries alone. */
  --accent-wash: #10b9810a;
  --accent-wash-soft: #10b9810d;
  --accent-wash-medium: #10b9811f;
  --accent-wash-strong: #10b98129;
  --accent-line-soft: #10b9814d;
  --accent-line: #10b98173;
  --surface-wash-soft: #ffffff08;
  --surface-wash: #ffffff0a;
  --surface-wash-strong: #ffffff14;
  --separator-soft: #ffffff0f;
  --shadow-soft: #0002;
  --shadow-medium: #0003;
  --shadow-deep: #00000047;
  --shadow-accent: #10b98133;
  --shadow-accent-strong: #10b98159;
  --grid-line: #6c97a908;
  --hero-glow: #12372e38;
  --partner-glow: #124b381f;
  --cta-glow: #105e402b;
  --bg-partner: #101c25;
  --bg-lifecycle: #0d1725;
  --radius-sm: 5px;
  --radius-md: 10px;
  --content-width: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --font-latin: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-arabic: Cairo, 'Noto Sans Arabic', Tahoma, sans-serif;
  --type-display: clamp(2.55rem, 4.25vw, 3.9rem);
  --type-h1: clamp(1.75rem, 3.4vw, 2.75rem);
  --type-h2: clamp(1.5rem, 2.8vw, 2.25rem);
  --type-h3: 1.25rem;
  --type-body-large: 1.125rem;
  --type-body: 1rem;
  --type-body-small: .9rem;
  --type-label: .875rem;
  --type-metadata: .8125rem;
  --type-button: .9rem;
  --leading-heading: 1.25;
  --leading-body: 1.7;
  --leading-label: 1.5;
  --measure-prose: 70ch;
  --target-size: 44px;
  --ease-out: cubic-bezier(.22, .68, .2, 1);
  --motion-micro: 180ms;
  --motion-component: 240ms;
  --motion-enter: 480ms;
  /* Compatibility aliases let existing inner components consume this palette. */
  --nuqta-dark: var(--bg-primary);
  --nuqta-green: var(--accent-fill);
  --nuqta-muted: var(--text-muted);
  --nuqta-white: var(--text-primary);
  --nuqta-light: var(--bg-section);
  --nuqta-slate: var(--text-secondary);
  --nuqta-surface: var(--bg-surface-elevated);
  --color-bg-dark: var(--bg-page);
  --color-bg: var(--bg-section);
  --color-green: var(--accent);
  --accent-green: var(--accent);
  --border-emphasis: var(--border-default);
  --surface-tinted: var(--bg-section);
  --surface-base: var(--bg-primary);
  --surface-raised: var(--surface);
  --surface-soft: var(--bg-secondary);
  --text-on-dark: var(--text-primary);
  --text-on-dark-primary: var(--text-primary);
  --text-on-dark-body: var(--text-secondary);
  --text-on-dark-lead: var(--text-secondary);
  --text-on-dark-secondary: var(--text-secondary);
  --text-on-dark-muted: var(--text-muted);
}
html[lang="ar"] { --leading-heading: 1.6; --leading-body: 1.9; --leading-label: 1.7; }
html { scroll-padding-top: 6rem; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 5px; border-radius: 3px; }
main:focus { outline: none; }