/*------------------------------------------------------------------
WomenSutra Design System v1.0 - CSS tokens (plain CSS copy)
Loaded by the standalone front page, which does not use the Sass bundle.
Mirrors assets/sass/_ws-tokens.scss; keep both in sync with
docs/Design-System-v1.md (section 8).
-------------------------------------------------------------------*/
:root {
  --ws-raspberry-50: #FFF1F6;
  --ws-raspberry-100: #FDE2EC;
  --ws-raspberry-200: #F8BFD6;
  --ws-raspberry-300: #F0A3C1;
  --ws-raspberry-400: #DF6B98;
  --ws-raspberry-500: #CA407B;
  --ws-raspberry-600: #B32661;
  --ws-raspberry-700: #941C4E;
  --ws-raspberry-800: #76183F;
  --ws-raspberry-900: #55132F;
  --ws-neutral-0: #FFFFFF;
  --ws-neutral-25: #FFF9F7;
  --ws-neutral-50: #F7F2EF;
  --ws-neutral-100: #ECE3DE;
  --ws-neutral-200: #D8CCC5;
  --ws-neutral-400: #A08C82;
  --ws-neutral-600: #706058;
  --ws-neutral-700: #51443E;
  --ws-neutral-800: #342B27;
  --ws-neutral-900: #241D1A;
  --ws-green-50: #EEF7F1;
  --ws-green-700: #286043;
  --ws-amber-50: #FFF6DE;
  --ws-amber-700: #7A540D;
  --ws-blue-50: #EEF4FF;
  --ws-blue-700: #315B96;
  --ws-red-50: #FFF0EE;
  --ws-red-700: #AD372C;
  --ws-surface-canvas: var(--ws-neutral-25);
  --ws-surface-default: var(--ws-neutral-0);
  --ws-surface-subtle: var(--ws-neutral-50);
  --ws-surface-brand: var(--ws-raspberry-50);
  --ws-surface-inverse: var(--ws-neutral-900);
  --ws-text-primary: var(--ws-neutral-900);
  --ws-text-secondary: var(--ws-neutral-600);
  --ws-text-inverse: var(--ws-neutral-0);
  --ws-text-brand: var(--ws-raspberry-700);
  --ws-text-disabled: var(--ws-neutral-600);
  --ws-action-primary: var(--ws-raspberry-600);
  --ws-action-hover: var(--ws-raspberry-700);
  --ws-action-pressed: var(--ws-raspberry-800);
  --ws-action-disabled: var(--ws-neutral-100);
  --ws-action-on-primary: var(--ws-neutral-0);
  --ws-border-default: var(--ws-neutral-200);
  --ws-border-subtle: var(--ws-neutral-100);
  --ws-border-focus: var(--ws-raspberry-600);
  --ws-border-error: var(--ws-red-700);
  --ws-brand-raspberry: var(--ws-raspberry-600);
  --ws-brand-petal: var(--ws-raspberry-300);
  --ws-status-success-bg: var(--ws-green-50);
  --ws-status-success-text: var(--ws-green-700);
  --ws-status-warning-bg: var(--ws-amber-50);
  --ws-status-warning-text: var(--ws-amber-700);
  --ws-status-info-bg: var(--ws-blue-50);
  --ws-status-info-text: var(--ws-blue-700);
  --ws-status-error-bg: var(--ws-red-50);
  --ws-status-error-text: var(--ws-red-700);
  --ws-space-0: 0px;
  --ws-space-4: 4px;
  --ws-space-8: 8px;
  --ws-space-12: 12px;
  --ws-space-16: 16px;
  --ws-space-20: 20px;
  --ws-space-24: 24px;
  --ws-space-32: 32px;
  --ws-space-40: 40px;
  --ws-space-48: 48px;
  --ws-space-64: 64px;
  --ws-space-80: 80px;
  --ws-space-96: 96px;
  --ws-radius-none: 0px;
  --ws-radius-small: 4px;
  --ws-radius-medium: 8px;
  --ws-radius-large: 16px;
  --ws-radius-pill: 999px;
  --ws-size-16: 16px;
  --ws-size-20: 20px;
  --ws-size-24: 24px;
  --ws-size-32: 32px;
  --ws-size-40: 40px;
  --ws-size-44: 44px;
  --ws-size-48: 48px;
  --ws-size-56: 56px;
  --ws-size-64: 64px;
  --ws-font-size-12: 12px;
  --ws-font-size-14: 14px;
  --ws-font-size-16: 16px;
  --ws-font-size-18: 18px;
  --ws-font-size-20: 20px;
  --ws-font-size-24: 24px;
  --ws-font-size-32: 32px;
  --ws-font-size-40: 40px;
  --ws-font-size-48: 48px;
  --ws-font-size-64: 64px;
  --ws-line-height-16: 16px;
  --ws-line-height-20: 20px;
  --ws-line-height-24: 24px;
  --ws-line-height-28: 28px;
  --ws-line-height-32: 32px;
  --ws-line-height-40: 40px;
  --ws-line-height-48: 48px;
  --ws-line-height-56: 56px;
  --ws-line-height-72: 72px;

  /* Page layout (front page) */
  --ws-gutter-desktop: 120px;
  --ws-gutter-mobile: 24px;

  /* Fonts, containers and elevation (web helpers from the guide) */
  --ws-font-editorial: "Lora", Georgia, serif;
  --ws-font-body: "DM Sans", Arial, sans-serif;
  --ws-font-brand: "Playfair Display", Georgia, serif;
  --ws-font-hindi: "Noto Sans Devanagari", sans-serif;
  --ws-content-max: 1200px;
  --ws-reading-max: 680px;
  --ws-shadow-card: 0 4px 16px rgba(36, 29, 26, 0.07);
}
