/*
  AppointIt design tokens (Phase 0)
  - Keep this file limited to CSS variables and lightweight mappings.
  - No global resets here (those belong to the Phase 1 "base" layer).
*/

:root {
  /* Spacing */
  --ai-spacing-unit: 4px;

  /* Typography */
  --ai-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

  /* Brand */
  --ai-color-primary: hsl(197, 71%, 61%);
  --ai-color-primary-hover: hsl(197 60% 47%);
  --ai-color-secondary: hsl(35, 100%, 52%);
  --ai-color-secondary-hover: hsl(35 100% 47%);

  /* Neutrals (legacy - prefer semantic tokens below) */
  --ai-color-bg: #ffffff;
  --ai-color-surface: #ffffff;
  --ai-color-text: #0f172a;
  --ai-color-muted-text: #64748b;
  --ai-color-border: #e2e8f0;

  /* Text hierarchy (slate-based) */
  --ai-text-default: #0f172a; /* slate-900 - input text, default */
  --ai-text-heading: #1e293b; /* slate-800 - headings, titles */
  --ai-text-body: #334155; /* slate-700 - labels, body text */
  --ai-text-secondary: #475569; /* slate-600 - secondary info */
  --ai-text-muted: #64748b; /* slate-500 - help, captions */
  --ai-text-placeholder: #94a3b8; /* slate-400 - placeholders */

  /* Background surfaces */
  --ai-bg-subtle: #f8fafc; /* slate-50 - hover, zebra */
  --ai-bg-muted: #f1f5f9; /* slate-100 - disabled, soft bg */

  /* Time grid / event surfaces */
  --ai-grid-appointment-gradient-start: rgba(133, 255, 68, 0.9);
  --ai-grid-appointment-gradient-end: rgba(5, 232, 35, 0.9);
  --ai-grid-appointment-border: hsl(146 87% 40%);
  --ai-grid-new-event-bg: hsl(197 60% 90%);
  --ai-grid-new-event-gradient-start: rgba(232, 244, 252, 0.96);
  --ai-grid-new-event-gradient-end: rgba(182, 217, 239, 0.96);
  --ai-grid-new-event-border: hsl(197 50% 75%);
  --ai-grid-new-event-invalid-bg: hsl(197 71% 70%);
  --ai-grid-new-event-text: #17364a;
  --ai-grid-existing-event-bg: #92c47d;
  --ai-grid-existing-event-hover-bg: #9fcd8d;
  --ai-grid-existing-event-border: #6d965c;
  --ai-grid-existing-event-text: #21301d;
  --ai-grid-shift-bg: hsl(80 70% 85%);
  --ai-grid-shift-border: hsl(80 50% 60%);
  --ai-grid-overlay-bg: rgba(255, 255, 255, 0.8);
  --ai-grid-divider: rgba(0, 0, 0, 0.1);

  /* Border variations */
  --ai-border-input: #cbd5e1; /* slate-300 - form inputs */

  /* Semantic */
  --ai-color-success: hsl(120 39% 54%);
  --ai-color-success-hover: hsl(120 39% 44%);
  --ai-color-warning: hsl(38 84% 62%);
  --ai-color-warning-hover: hsl(38 84% 52%);
  --ai-color-danger: hsl(4 90% 58%);
  --ai-color-danger-hover: hsl(4 78% 50%);
  --ai-color-info: hsl(200 65% 62%);
  --ai-color-info-hover: hsl(200 65% 52%);

  /* Shape */
  --ai-radius-sm: 0.25rem;
  --ai-radius-md: 0.5rem;
  --ai-radius-lg: 0.75rem;

  /* Shadow */
  --ai-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --ai-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.10);
}