/* ==========================================================================
   Hajiz Design Tokens — single source of truth
   All components and pages MUST reference these variables.
   ========================================================================== */

:root {
  /* ── Brand colors ── */
  --color-accent: #7c3aed;
  --color-accent-hover: #6d28d9;
  --color-accent-soft: #ede9fe;
  --color-accent-muted: #faf5ff;
  --color-accent-outline: #c4b5fd;
  --color-accent-outline-hover: #a78bfa;
  --color-accent-glow: rgba(124, 58, 237, 0.2);

  --color-cta: var(--color-accent);
  --color-cta-hover: var(--color-accent-hover);
  --color-cta-shadow: var(--color-accent-glow);

  /* Legacy aliases (do not use in new code) */
  --color-primary: var(--color-accent);
  --color-primary-hover: var(--color-accent-hover);
  --color-primary-soft: var(--color-accent-soft);
  --color-primary-glow: var(--color-accent-glow);
  --org-primary: var(--color-accent);
  --org-secondary: #a855f7;

  /* ── Neutrals ── */
  --color-ink: #0f172a;
  --color-ink-soft: #64748b;
  --color-ink-muted: #94a3b8;
  --color-paper: #f8fafc;
  --color-paper-light: #ffffff;
  --color-line: #e2e8f0;
  --color-line-soft: rgba(226, 232, 240, 0.6);
  --color-line-hairline: #f1f5f9;
  --color-slate: #334155;

  /* ── Status (semantic) ── */
  --color-success: #16a34a;
  --color-success-bg: #dcfce7;
  --color-warning: #d97706;
  --color-warning-bg: #fef3c7;
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --color-danger-bg: #fee2e2;
  --color-info: #2563eb;
  --color-info-bg: #dbeafe;
  --color-action-needed: #ea580c;
  --color-action-needed-bg: #ffedd5;
  --color-action-needed-border: rgba(234, 88, 12, 0.25);
  --color-confirmed: var(--color-success);
  --color-confirmed-bg: var(--color-success-bg);

  /* Retired teal — mapped for backward compat */
  --color-teal: var(--color-success);
  --color-teal-soft: var(--color-success-bg);
  --color-teal-glow: var(--color-accent-glow);

  /* ── Scheduling accents ── */
  --color-today-tint: rgba(136, 109, 177, 0.1);
  --color-today-accent: #886db1;

  /* ── Org / theme defaults ── */
  --org-background: var(--color-paper);
  --org-sidebar: rgba(255, 255, 255, 0.72);

  /* ── Radius ── */
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-control: 8px;
  --radius-container: 12px;
  --radius-lg: 16px;
  --radius-page-shell: 20px;
  --radius-public: 24px;
  --radius-pill: 9999px;

  /* Legacy radius aliases */
  --radius-sm: var(--radius-control);
  --radius-md: var(--radius-container);
  --radius-xl: var(--radius-public);
  --radius-full: var(--radius-pill);

  /* ── Modal / Dialog ── */
  --modal-max-width: 520px;
  --modal-radius: var(--radius-lg);
  --modal-shadow: var(--shadow-xl);

  /* ── Spacing scale ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --pad-toolbar: var(--space-2) var(--space-3);
  --pad-drawer-body: var(--space-5);
  --pad-drawer-footer: var(--space-4) var(--space-5);
  --gap-field: var(--space-4);
  --gap-toolbar: var(--space-2);

  /* ── Typography scale ── */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --text-title-size: 1.65rem;
  --text-title-weight: 700;
  --text-title-tracking: -0.02em;

  --text-subtitle-size: 0.88rem;
  --text-subtitle-weight: 400;

  --text-section-size: 1.05rem;
  --text-section-weight: 700;

  --text-label-size: 0.8125rem;
  --text-label-weight: 600;

  --text-body-size: 0.875rem;
  --text-body-weight: 400;

  --text-caption-size: 0.75rem;
  --text-caption-weight: 400;

  --text-toolbar-size: 0.82rem;
  --text-toolbar-weight: 500;

  --text-btn-size: 0.88rem;
  --text-btn-weight: 600;

  /* ── Control sizes ── */
  --control-height: 40px;
  --control-height-sm: 34px;
  --control-height-toolbar: 34px;
  --btn-height: 36px;
  --btn-height-drawer: 42px;
  --btn-pad-y: 9px;
  --btn-pad-x: 18px;
  --btn-pad-cta-y: 10px;
  --btn-pad-cta-x: 20px;

  /* ── Elevation ── */
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-blur: blur(20px);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 20px 45px rgba(0, 0, 0, 0.08);

  /* ── Layout ── */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 68px;
  --topbar-height: 68px;
  --container-max: 1320px;

  /* ── Motion ── */
  --transition-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 260ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-sidebar: 240ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Drawer ── */
  --drawer-width: 420px;
  --drawer-overlay-bg: rgba(15, 23, 42, 0.45);
  --drawer-radius: var(--radius-none);
  --drawer-header-h: 56px;
  --drawer-shadow: -8px 0 32px rgba(15, 23, 42, 0.12);
  --drawer-transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --drawer-overlay-transition: opacity 0.24s ease;
  --drawer-title-size: var(--text-section-size);
  --drawer-label-size: var(--text-label-size);
  --drawer-input-size: var(--text-body-size);
  --drawer-caption-size: var(--text-caption-size);
  --drawer-field-gap: var(--gap-field);
  --drawer-body-pad: var(--pad-drawer-body);
  --drawer-footer-pad: var(--pad-drawer-footer);
  --drawer-input-h: var(--control-height);
  --drawer-btn-h: var(--btn-height-drawer);

  /* ── Scheduling (aliases) ── */
  --sched-bg: var(--color-paper);
  --sched-toolbar-bg: var(--color-line-hairline);
  --sched-border: var(--color-line);
  --sched-border-hairline: var(--color-line-hairline);
  --sched-control-radius: var(--radius-control);
  --sched-container-radius: var(--radius-container);
  --sched-heading-size: var(--text-title-size);
  --sched-subtitle-size: var(--text-subtitle-size);
  --sched-toolbar-label-size: var(--text-toolbar-size);
  --sched-table-header-size: var(--text-toolbar-size);
  --sched-body-size: var(--text-toolbar-size);
  --sched-control-h: var(--control-height-toolbar);
  --sched-btn-h: var(--btn-height);
  --sched-toolbar-pad: var(--pad-toolbar);
  --sched-cell-pad: var(--space-3) 10px;
  --sched-today-tint: var(--color-today-tint);
  --sched-today-accent: var(--color-today-accent);
  --clinexa-border: var(--color-line-hairline);
  --clinexa-card-radius: var(--radius-container);

  /* ── Murphy app theme (site-wide) ── */
  --murphy-card-bg: #fdfcfe;
  --murphy-card-border: #e8e6ed;
  --murphy-toolbar-bg: #f8f6fb;
  --murphy-accent: #886db1;
  --murphy-accent-soft: #b1a5d4;
  --murphy-accent-muted: #ece8f3;
  --murphy-text: #4a4a68;
  --murphy-text-muted: #8e8e9e;
  --murphy-row-hover: #f5f2f9;
  --murphy-shadow: 0 8px 32px rgba(74, 74, 104, 0.08);
  --murphy-page-gradient: radial-gradient(ellipse 120% 80% at 10% 0%, #e6e0ee 0%, #ece6f2 35%, #f0ecf5 70%, #f2f0f7 100%);
}

@media (max-width: 768px) {
  :root {
    --topbar-height: 60px;
  }
}
