/* =============================================================================
   OnlyHIPAA — Design Tokens (single source of truth)

   Every color, spacing, radius, shadow, and type value used anywhere in the
   product resolves to a custom property defined HERE. Light values live in
   :root; dark mode is ONLY a remap inside [data-theme="dark"] — components
   must never need their own dark rules if they use these tokens.

   Loaded BEFORE app.css (see templates/partials/head.php). Lint (lint:ui)
   flags raw hex values and deprecated aliases in templates.
   ============================================================================= */

/* Self-hosted Inter (latin variable font) — replaces the render-blocking
   Google Fonts CDN. One file covers weights 300–800. font-display:swap keeps
   text visible during load; the file is <link rel=preload>ed in head.php. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
}

/* ---- CSS Custom Properties -------------------------------- */
:root {
  /* Brand */
  --primary:        #2563eb;
  --primary-hover:  #1d4ed8;
  --primary-light:  #eff6ff;
  --primary-text:   #2563eb;
  --primary-dark:   #1e40af;
  --accent:         #0891b2;
  --accent-light:   #ecfeff;

  /* Legacy aliases (keep for existing code) */
  --success:  #059669;
  --warning:  #d97706;
  --danger:   #dc2626;
  --info:     #0891b2;

  /* Semantic shorthand aliases (used by utility CSS) */
  --bg:      #f8fafc;
  --bg-card: #ffffff;
  --border:  #e5e7eb;
  /* Legacy aliases — referenced by older inline styles. Map to --bg-alt so
     code that says `var(--surface-secondary, var(--bg-secondary))` resolves
     to a defined value instead of falling through to nothing. */
  --surface-secondary: #f1f5f9;
  --bg-secondary:      #f1f5f9;

  /* Surfaces */
  --bg-body:           #f8fafc;
  --bg-surface:        #ffffff;
  --bg-surface-raised: #ffffff;
  --bg-alt:            #f1f5f9;
  --bg-hover:          #f8fafc;

  /* Text */
  --text-primary:   #111827;
  --text-secondary: #374151;
  /* #697079 (vs the old #6b7280) clears WCAG AA body (>=4.5) even on the
     tinted --bg-alt surface (#f1f5f9), where muted text often sits. */
  --text-muted:     #697079;
  /* --text-subtle is used for hint/secondary label text, so it must clear WCAG
     AA-large (>=3:1) on every light surface (body/surface/alt). #828892 gives
     ~3.3:1 while staying clearly lighter than --text-muted. --text-disabled is
     for disabled controls (WCAG-exempt) and stays at the fainter value. */
  --text-subtle:    #828892;
  --text-disabled:  #9ca3af;
  --text-inverse:   #ffffff;

  /* Borders */
  --border-color:  #e5e7eb;
  --border-strong: #d1d5db;
  --border-focus:  #2563eb;

  /* Semantic colors — light variants */
  --success-light:  #ecfdf5;
  --warning-light:  #fffbeb;
  --danger-light:   #fef2f2;
  --info-light:     #ecfeff;

  /* Semantic colors */
  --color-success:        #059669;
  --color-success-bg:     #ecfdf5;
  --color-success-border: #a7f3d0;
  --color-success-text:   #065f46;
  --color-warning:        #d97706;
  --color-warning-bg:     #fffbeb;
  --color-warning-border: #fcd34d;
  --color-warning-text:   #92400e;
  --color-danger:         #dc2626;
  --color-danger-bg:      #fef2f2;
  --color-danger-border:  #fca5a5;
  --color-danger-text:    #991b1b;
  --color-info:           #0891b2;
  --color-info-bg:        #ecfeff;
  --color-info-border:    #a5f3fc;
  --color-info-text:      #155e75;
  --color-purple:         #7c3aed;
  --color-purple-bg:      #f5f3ff;
  --color-white:          #ffffff;

  /* Legacy gray scale (keep for existing code) */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow:    0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 6px rgb(0 0 0 / 0.07), 0 2px 4px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 10px 15px rgb(0 0 0 / 0.07), 0 4px 6px rgb(0 0 0 / 0.05);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Radius */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Transitions */
  --transition:      150ms ease;
  --transition-fast: 120ms ease;
  --transition-base: 150ms ease;
  --transition-slow: 300ms ease;
  --transition-md:   250ms ease;

  /* Sidebar */
  --sidebar-width:            240px;
  --sidebar-bg:               #ffffff;
  --sidebar-border:           #e5e7eb;
  --sidebar-link-color:       #374151;
  --sidebar-link-hover-bg:    #f3f4f6;
  --sidebar-link-active-bg:   #eff6ff;
  --sidebar-link-active-color:#2563eb;

  /* Code blocks keep a fixed dark-slate palette in both themes */
  --code-bg:   #1e293b;
  --code-text: #e2e8f0;
  /* Theme-aware faint surface overlays */
  --overlay-faint: rgba(0, 0, 0, .03);
  --overlay-soft:  rgba(0, 0, 0, .06);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', Consolas, monospace;
}

/* ---- Semantic tiers (modernization additions) ---------------------------- */
:root {
  /* Surfaces: 1 = page, 2 = card, 3 = raised/popover */
  --surface-1: var(--bg-body);
  --surface-2: var(--bg-surface);
  --surface-3: var(--bg-surface-raised);

  /* Text: 1 = primary, 2 = secondary, 3 = muted */
  --text-1: var(--text-primary);
  --text-2: var(--text-secondary);
  --text-3: var(--text-muted);

  /* Focus & overlays */
  --focus-ring:   0 0 0 3px rgba(37, 99, 235, .35);
  --overlay:      rgba(15, 23, 42, .5);

  /* Marketing background (hero grid / glows / shapes / starfield).
     Dark values are remapped below so the dynamic background stays visible
     and on-palette in both themes. */
  --hero-gradient: linear-gradient(135deg, #f8faff 0%, #eff6ff 50%, #f0fdfe 100%);
  --hero-grid-line: rgba(30, 64, 175, .04);
  --hero-glow-1:   #bfdbfe;
  --hero-glow-2:   #a5f3fc;
  --hero-glow-opacity: .35;
  --hero-shape:    rgba(30, 64, 175, .14);
  --hero-star:     rgba(30, 64, 175, .35);
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Semantic shorthand aliases */
  --bg:      #0f172a;
  --bg-card: #1e293b;
  --border:  #334155;
  --surface-secondary: #162032;
  --bg-secondary:      #162032;

  --bg-body:           #0f172a;
  --bg-surface:        #1e293b;
  --bg-surface-raised: #253347;
  --bg-alt:            #162032;
  --overlay-faint: rgba(255, 255, 255, .04);
  --overlay-soft:  rgba(255, 255, 255, .08);
  --bg-hover:          #253347;

  --text-primary:   #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted:     #94a3b8;
  /* AA-large (>=3:1) on every dark surface incl. raised #253347; stays lighter
     than --text-muted. --text-disabled (disabled controls, WCAG-exempt) keeps
     the fainter value. */
  --text-subtle:    #717f95;
  --text-disabled:  #475569;

  --border-color:  #334155;
  --border-strong: #475569;
  --border-focus:  #60a5fa;

  /* Semantic light variants — dark equivalents */
  --success-light:  #064e3b;
  --warning-light:  #451a03;
  --danger-light:   #450a0a;
  --info-light:     #0c4a6e;

  --color-success:        #34d399;
  --color-success-bg:     #064e3b;
  --color-success-border: #065f46;
  --color-success-text:   #6ee7b7;
  --color-warning:        #fbbf24;
  --color-warning-bg:     #451a03;
  --color-warning-border: #78350f;
  --color-warning-text:   #fcd34d;
  --color-danger:         #f87171;
  --color-danger-bg:      #450a0a;
  --color-danger-border:  #7f1d1d;
  --color-danger-text:    #fca5a5;
  --color-info:           #38bdf8;
  --color-info-bg:        #0c4a6e;
  --color-info-border:    #0369a1;
  --color-info-text:      #a5f3fc;
  --color-purple:         #a78bfa;
  --color-purple-bg:      #2e1065;

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.6), 0 8px 10px -6px rgb(0 0 0 / 0.4);

  --sidebar-bg:               #1e293b;
  --sidebar-border:           #334155;
  --sidebar-link-color:       #94a3b8;
  --sidebar-link-hover-bg:    #253347;
  --sidebar-link-active-bg:   rgba(37,99,235,.2);
  --sidebar-link-active-color:#60a5fa;
  --primary-light:            rgba(37,99,235,.2);
  --primary-text:             #60a5fa;

  /* Legacy aliases */
  --gray-50:  #162032;
  --gray-100: #1e293b;
  --gray-200: #334155;
  --gray-300: #475569;
  --gray-400: #64748b;
  --gray-500: #94a3b8;
  --gray-600: #cbd5e1;
  --gray-700: #e2e8f0;
  --gray-800: #f1f5f9;
  --gray-900: #f8fafc;
}


/* ---- Dark remap for the modernization additions --------------------------- */
[data-theme="dark"] {
  --focus-ring: 0 0 0 3px rgba(96, 165, 250, .4);
  --overlay:    rgba(2, 6, 23, .65);

  --hero-gradient: linear-gradient(135deg, #0b1120 0%, #0f172a 55%, #0b1f2a 100%);
  --hero-grid-line: rgba(148, 197, 253, .05);
  --hero-glow-1:   #1e3a8a;
  --hero-glow-2:   #164e63;
  --hero-glow-opacity: .22;
  --hero-shape:    rgba(96, 165, 250, .18);
  --hero-star:     rgba(191, 219, 254, .65);
}