/* Carehome --ch-* design tokens, light (:root) and dark ([data-theme="dark"]).
   Head-linked from anvil.yaml so the designer canvas resolves var(--ch-*);
   every app stylesheet reads them. */

:root {
  /* Backgrounds */
  --ch-bg-primary: #f8fafc;
  --ch-bg-secondary: #f1f5f9;
  --ch-bg-card: #ffffff;
  --ch-bg-elevated: #ffffff;
  --ch-bg-input: #f1f5f9;
  --ch-bg-overlay: rgba(0, 0, 0, 0.5);
  --ch-bg-subtle: #f9fafb;
  --ch-bg-hover: #f5f5f5;

  /* Text */
  --ch-text-primary: #0f172a;
  --ch-text-secondary: #475569;
  --ch-text-muted: #94a3b8;
  --ch-text-disabled: #cbd5e1;
  --ch-text-inverse: #ffffff;

  /* Brand Colors (Pharmacy-Xpress Orange) */
  --ch-accent-primary: #f68b1f;
  --ch-accent-primary-hover: #ef700e;
  --ch-accent-primary-text: #b45309;
  --ch-accent-secondary: #feead3;
  --ch-accent-secondary-hover: #fdd9b0;
  --ch-accent-soft: rgba(246,139,31,0.12);  /* translucent accent tint for hover/active list overlays */

  /* Semantic Colors */
  --ch-success: #16a34a;
  --ch-success-bg: #dcfce7;
  --ch-success-border: #86efac;
  --ch-warning: #d97706;
  --ch-warning-bg: #fef3c7;
  --ch-warning-border: #fcd34d;
  --ch-danger: #dc2626;
  --ch-danger-hover: #b91c1c;
  --ch-danger-bg: #fee2e2;
  --ch-danger-border: #fca5a5;
  /* Danger FOREGROUND, for text sitting ON --ch-danger-bg. Distinct from
     --ch-danger, which is the accent colour for danger text on the PAGE
     background; it is too light to read on its own -bg in dark mode. */
  --ch-danger-text: #7f1d1d;
  --ch-info: #0891b2;
  --ch-info-bg: #cffafe;
  --ch-info-border: #67e8f9;
  --ch-status-complaint: #e74c3c;
  --ch-status-feedback: #27ae60;

  /* Status Pill Colors (Prescription Statuses) */
  --ch-pill-no-prescription-bg: #fecaca;
  --ch-pill-no-prescription-text: #991b1b;
  --ch-pill-prescribed-bg: #fef08a;
  --ch-pill-prescribed-text: #854d0e;
  --ch-pill-processing-bg: #a5f3fc;
  --ch-pill-processing-text: #155e75;
  --ch-pill-owings-bg: #fdba74;
  --ch-pill-owings-text: #9a3412;
  --ch-pill-bagged-bg: #bbf7d0;
  --ch-pill-bagged-text: #166534;
  --ch-pill-dispatched-bg: #d9f99d;
  --ch-pill-dispatched-text: #3f6212;
  --ch-pill-cancelled-bg: #e5e7eb;
  --ch-pill-cancelled-text: #6b7280;

  /* Row highlight colors */
  --ch-row-no-prescription: #fffacd;
  --ch-row-acute: #e8f5e9;
  --ch-row-monthly: #fffde7;
  --ch-row-interim: #e8f5e9;

  /* Borders & Shadows */
  --ch-border: #e2e8f0;
  --ch-border-focus: #b45309;
  --ch-focus-shadow: rgba(246, 139, 31, 0.15);
  --ch-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ch-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --ch-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* Border Radius */
  --ch-radius-sm: 4px;
  --ch-radius-md: 8px;
  --ch-radius-lg: 12px;
  --ch-radius-full: 9999px;

  /* Typography */
  --ch-font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ch-font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;

  /* Spacing */
  --ch-space-xs: 4px;
  --ch-space-sm: 8px;
  --ch-space-md: 16px;
  --ch-space-lg: 24px;
  --ch-space-xl: 32px;
  --ch-sticky-top: 0px;

  /* Transitions */
  --ch-transition-fast: 150ms ease;
  --ch-transition-normal: 250ms ease;

  /* Z-index layers */
  --ch-z-dropdown: 100;
  --ch-z-sticky: 200;
  --ch-z-modal: 300;
  --ch-z-overlay: 400;
  --ch-z-toast: 500;
}

/* Dark Theme Overrides */
[data-theme="dark"] {
  /* Backgrounds */
  --ch-bg-primary: #0f172a;
  --ch-bg-secondary: #1e293b;
  --ch-bg-card: #1e293b;
  --ch-bg-elevated: #334155;
  --ch-bg-input: #1e293b;
  --ch-bg-overlay: rgba(0, 0, 0, 0.7);
  /* Dark values for the subtle/hover surfaces (without these the cycle
     switcher + any other consumer rendered near-white in dark mode).
     Slate ramp: page #0f172a < subtle #172033 < card #1e293b. */
  --ch-bg-subtle: #172033;
  --ch-bg-hover: #283548;

  /* Text */
  --ch-text-primary: #f1f5f9;
  --ch-text-secondary: #cbd5e1;
  --ch-text-muted: #64748b;
  --ch-text-disabled: #475569;
  --ch-text-inverse: #0f172a;

  /* Brand Colors (PX Orange, brightened for dark mode) */
  /* Note: --ch-accent-primary-text == --ch-accent-primary in dark mode by design — */
  /* #ffa94d passes AA on the dark surfaces (#0f172a, #1e293b). If --ch-accent-primary */
  /* is ever shifted toward the brighter light-mode #f68b1f, --ch-accent-primary-text */
  /* MUST be re-checked (and likely held lighter) to preserve the fill-vs-text split. */
  --ch-accent-primary: #ffa94d;
  --ch-accent-primary-hover: #f68b1f;
  --ch-accent-primary-text: #ffa94d;
  --ch-accent-secondary: #3d2814;
  --ch-accent-secondary-hover: #4a3219;
  --ch-accent-soft: rgba(255,169,77,0.20);  /* translucent accent tint for hover/active list overlays */

  /* Semantic Colors (Adjusted for dark mode) */
  --ch-success: #4ade80;
  --ch-success-bg: #14532d;
  --ch-success-border: #166534;
  --ch-warning: #fbbf24;
  --ch-warning-bg: #78350f;
  --ch-warning-border: #92400e;
  --ch-danger: #f87171;
  --ch-danger-hover: #ef4444;
  --ch-danger-bg: #7f1d1d;
  --ch-danger-border: #991b1b;
  /* Danger foreground, inverted for dark mode: a LIGHT tint on the dark -bg,
     matching the pill pairs below (#fecaca on #7f1d1d is exactly the
     --ch-pill-no-prescription pair). Keep it light — the light-mode #7f1d1d is
     indistinguishable from the dark --ch-danger-bg. */
  --ch-danger-text: #fecaca;
  --ch-info: #22d3ee;
  --ch-info-bg: #164e63;
  --ch-info-border: #155e75;

  /* Status Pill Colors (Dark mode adjusted) */
  --ch-pill-no-prescription-bg: #7f1d1d;
  --ch-pill-no-prescription-text: #fecaca;
  --ch-pill-prescribed-bg: #713f12;
  --ch-pill-prescribed-text: #fef08a;
  --ch-pill-processing-bg: #164e63;
  --ch-pill-processing-text: #a5f3fc;
  --ch-pill-owings-bg: #7c2d12;
  --ch-pill-owings-text: #fdba74;
  --ch-pill-bagged-bg: #14532d;
  --ch-pill-bagged-text: #bbf7d0;
  --ch-pill-dispatched-bg: #365314;
  --ch-pill-dispatched-text: #d9f99d;
  --ch-pill-cancelled-bg: #374151;
  --ch-pill-cancelled-text: #d1d5db;

  /* Row highlight colors (Dark mode) */
  --ch-row-no-prescription: #422006;
  --ch-row-acute: #1a2e22;
  --ch-row-monthly: #2e2a10;
  --ch-row-interim: #1a2e22;

  /* Borders & Shadows */
  --ch-border: #334155;
  --ch-border-focus: #ffa94d;
  --ch-focus-shadow: rgba(255, 169, 77, 0.20);
  --ch-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --ch-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --ch-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
}