/* Copied from prototypes/shared/tokens.css (approved in A-02). Keep both in sync. */
/*
 * Design tokens for the prototype.
 *
 * TEMPORARY VALUES: these colors and fonts are placeholders, not an approved
 * design. They are the single place to change brand colors and typography:
 * every screen reads them through var(--…).
 *
 * --color-primary / --color-secondary stand in for the organization's
 * primary and secondary colors that the admin will set later (Phase 0 §3).
 */

:root {
  /* Brand (placeholder) */
  --color-primary: #1f6f8b;
  --color-primary-contrast: #ffffff;
  --color-secondary: #c28a2c;
  --color-secondary-contrast: #ffffff;

  /* Neutrals */
  --color-bg: #f6f7f9;
  --color-surface: #ffffff;
  --color-surface-muted: #eef0f3;
  --color-border: #d9dde3;
  --color-text: #1c2430;
  --color-text-muted: #5b6574;

  /* Status */
  --color-success: #1e8a4c;
  --color-warning: #b26a00;
  --color-danger: #c0392b;
  --color-info: #2a6fdb;

  /* Typography (placeholder: system fonts, no download needed) */
  --font-ar: "Segoe UI", "Noto Sans Arabic", Tahoma, "Geeza Pro", sans-serif;
  --font-en: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-mono: Consolas, "SF Mono", Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --line-height: 1.6;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Shape and depth */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.1);

  /* Layout breakpoints (reference values for media queries) */
  --bp-mobile: 640px;
  --bp-desktop: 1024px;
}

/* Font follows the document language set by i18n.js */
:root:lang(ar) { --font-body: var(--font-ar); }
:root:lang(en) { --font-body: var(--font-en); }