/* ============================================================
   MyClinic design tokens — the single source of truth for colour,
   spacing, radius, and type across every screen.

   Load order matters: this file comes first, then modern.css and any
   per-feature stylesheet. Views must not redefine these in a local
   <style> block; add a token here instead so one change reaches
   every screen.

   The --win-* names are kept because ~24,000 lines of existing Razor
   reference them. They are aliases now, not separate palettes, so the
   two patient-review screens no longer drift from everything else.
   ============================================================ */

:root {
    /* ---- Canvas and surfaces ---- */
    --clinic-bg:            #f1f5f9;
    --clinic-surface:       #ffffff;
    --clinic-surface-sunk:  #f8fafc;
    --clinic-border:        #cbd5e1;
    --clinic-border-soft:   #e2e8f0;

    /* ---- Text ---- */
    --clinic-text:          #0f172a;
    --clinic-text-body:     #334155;
    --clinic-text-muted:    #64748b;
    --clinic-text-invert:   #f8fafc;

    /* ---- Brand / primary action ---- */
    --clinic-primary:       #2563eb;
    --clinic-primary-hover: #1d4ed8;
    --clinic-primary-soft:  #eff6ff;
    --clinic-primary-ring:  rgba(37, 99, 235, 0.22);

    /* ---- Semantic status (kept separate from the brand colour) ---- */
    --clinic-success:       #0d9488;
    --clinic-success-hover: #0f766e;
    --clinic-success-soft:  #ccfbf1;

    --clinic-danger:        #e11d48;
    --clinic-danger-hover:  #be123c;
    --clinic-danger-soft:   #ffe4e6;

    --clinic-warning:       #d97706;
    --clinic-warning-soft:  #fef3c7;

    --clinic-info:          #0284c7;
    --clinic-info-soft:     #e0f2fe;

    /* ---- Type ---- */
    --clinic-font:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --clinic-font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;

    --clinic-fs-xs:  11px;
    --clinic-fs-sm:  12.5px;
    --clinic-fs-md:  14px;
    --clinic-fs-lg:  16px;
    --clinic-fs-xl:  20px;

    /* ---- Spacing scale — use these instead of ad-hoc pixel margins ---- */
    --clinic-space-1: 4px;
    --clinic-space-2: 8px;
    --clinic-space-3: 12px;
    --clinic-space-4: 16px;
    --clinic-space-5: 24px;
    --clinic-space-6: 32px;

    /* ---- Radius, elevation, motion ---- */
    --clinic-radius-sm: 6px;
    --clinic-radius:    10px;
    --clinic-radius-lg: 14px;

    --clinic-shadow-sm: 0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
    --clinic-shadow:    0 4px 12px rgba(15, 23, 42, .08);
    --clinic-shadow-lg: 0 18px 40px rgba(15, 23, 42, .16);

    /* Dim behind a modal, and the lighter wash used for a busy overlay that
       sits over a screen the user is still looking at. */
    --clinic-scrim:      rgba(15, 23, 42, .50);
    --clinic-scrim-soft: rgba(15, 23, 42, .35);
    --clinic-veil:       rgba(248, 250, 252, .72);

    --clinic-transition: .17s ease;

    /* ---- Chrome dimensions ---- */
    --clinic-sidebar-w: 230px;
    --clinic-header-h:  60px;

    /* ============================================================
       Legacy aliases. Existing views keep working; new work should
       use the --clinic-* names above.
       ============================================================ */

    /* modern.css vocabulary */
    --bg:            var(--clinic-bg);
    --white:         var(--clinic-surface);
    --surface:       var(--clinic-surface-sunk);
    --border:        var(--clinic-border-soft);
    --border-focus:  var(--clinic-primary);
    --blue:          var(--clinic-primary);
    --blue-light:    var(--clinic-primary-soft);
    --blue-mid:      #bfdbfe;
    --text-dark:     var(--clinic-text);
    --text-body:     var(--clinic-text-body);
    --text-muted:    var(--clinic-text-muted);
    --text-label:    var(--clinic-text-body);
    --green:         #16a34a;
    --green-bg:      #f0fdf4;
    --green-border:  #bbf7d0;
    --red:           #dc2626;
    --sidebar-w:     var(--clinic-sidebar-w);
    --header-h:      var(--clinic-header-h);
    --r:             var(--clinic-radius);
    --r-sm:          var(--clinic-radius-sm);
    --shadow-sm:     var(--clinic-shadow-sm);
    --shadow:        var(--clinic-shadow);
    --t:             var(--clinic-transition);

    /* patient-review vocabulary (was duplicated in two 12k-line views) */
    --win-bg:          var(--clinic-bg);
    --win-surface:     var(--clinic-surface);
    --win-border:      var(--clinic-border);
    --win-text-dark:   var(--clinic-text);
    --win-text-body:   var(--clinic-text-body);
    --win-text-muted:  var(--clinic-text-muted);
    --win-blue:        var(--clinic-primary);
    --win-blue-hover:  var(--clinic-primary-hover);
    --win-blue-light:  var(--clinic-primary-soft);
    --win-green:       var(--clinic-success);
    --win-green-hover: var(--clinic-success-hover);
    --win-green-light: var(--clinic-success-soft);
    --win-red:         var(--clinic-danger);
    --win-red-hover:   var(--clinic-danger-hover);
    --win-red-light:   var(--clinic-danger-soft);
    --win-amber:       var(--clinic-warning);
    --win-amber-light: var(--clinic-warning-soft);
    --win-font:        var(--clinic-font);
    --win-mono:        var(--clinic-font-mono);

    /* "--primary-color" bridge used by a handful of pages */
    --primary-color:   var(--clinic-primary);
    --secondary-color: var(--clinic-primary-soft);
    --accent-color:    var(--clinic-primary);
    --border-color:    var(--clinic-border-soft);
    --text-color:      var(--clinic-text-body);
    --erp-font:        var(--clinic-font);
}

/* ============================================================
   Dark theme.

   Hoisted out of the two _PatientReview views, which each carried their own
   copy. Opt in by setting data-theme="dark" on <html>. Only the token values
   change here — no component ever restates a colour.
   ============================================================ */

[data-theme="dark"] {
    --clinic-bg:            #0f172a;
    --clinic-surface:       #1e293b;
    --clinic-surface-sunk:  #172033;
    --clinic-border:        #334155;
    --clinic-border-soft:   #263449;

    --clinic-text:          #f8fafc;
    --clinic-text-body:     #cbd5e1;
    --clinic-text-muted:    #94a3b8;
    --clinic-text-invert:   #0f172a;

    --clinic-primary:       #3b82f6;
    --clinic-primary-hover: #60a5fa;
    --clinic-primary-soft:  rgba(59, 130, 246, .12);
    --clinic-primary-ring:  rgba(59, 130, 246, .32);

    --clinic-success:       #14b8a6;
    --clinic-success-hover: #2dd4bf;
    --clinic-success-soft:  rgba(20, 184, 166, .15);

    --clinic-danger:        #fb7185;
    --clinic-danger-hover:  #fda4af;
    --clinic-danger-soft:   rgba(251, 113, 133, .15);

    --clinic-warning:       #f59e0b;
    --clinic-warning-soft:  rgba(245, 158, 11, .15);

    --clinic-info:          #38bdf8;
    --clinic-info-soft:     rgba(56, 189, 248, .15);

    --clinic-shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
    --clinic-shadow:    0 4px 12px rgba(0, 0, 0, .45);
    --clinic-shadow-lg: 0 18px 40px rgba(0, 0, 0, .55);

    --clinic-scrim:      rgba(2, 6, 23, .68);
    --clinic-scrim-soft: rgba(2, 6, 23, .50);
    --clinic-veil:       rgba(15, 23, 42, .72);
}