/* ClinicOS Design System — tokens (Stage 1, Option B "Editorial / Minimal")
   Semantic tokens only. Every value derives from the existing ClinicOS brand palette
   (app.css: --brand-navy #0D1B2A, --brand-teal #00BFA6, --teal-d #0f766e, --brand-blue #1565C0,
   --brand-slate #334155, --brand-bg-light #F5F7FA).
   Namespace: --cos-*. Tokens are custom properties only — loading this file changes nothing
   on legacy pages until a component class (.cos-*) or --cos-* variable is used.
   Light is the default surface (Option B). Dark maps onto the existing dark palette. */

:root {
  /* ── Brand ─────────────────────────────────────────── */
  --cos-color-brand-primary: #0f766e;      /* teal-d: 5.5:1 on white — safe for text and filled buttons */
  --cos-color-brand-primary-hover: #0b5f58;
  --cos-color-brand-accent: #00bfa6;       /* brand teal: fills, marks, active indicators (not small text) */
  --cos-color-brand-accent-soft: #e6f7f4;
  --cos-color-brand-navy: #0d1b2a;
  --cos-color-brand-blue: #1565c0;

  /* ── Surfaces ──────────────────────────────────────── */
  --cos-color-bg-app: #f7f9fb;             /* brand-bg-light */
  --cos-color-bg-surface: #ffffff;
  --cos-color-bg-subtle: #f1f4f8;
  --cos-color-bg-selected: #e6f7f4;
  --cos-color-bg-hover: #f1f5f9;
  --cos-color-bg-overlay: rgba(13, 27, 42, .45);

  /* ── Text ──────────────────────────────────────────── */
  --cos-color-text-primary: #0d1b2a;       /* navy: 17.4:1 on white */
  --cos-color-text-secondary: #334155;     /* slate: 10.4:1 */
  --cos-color-text-muted: #5b6b7d;         /* 5.5:1 on white, 5.1:1 on bg-app, 4.95:1 on bg-subtle */
  --cos-color-text-inverse: #ffffff;
  --cos-color-text-link: #0f766e;

  /* ── Borders ───────────────────────────────────────── */
  --cos-color-border: #dde3ea;
  --cos-color-border-subtle: #eaeef3;
  --cos-color-border-strong: #b7c1cd;

  /* ── Semantic status (text tones ≥4.5:1 on their soft background) ── */
  --cos-color-success: #166534;
  --cos-color-success-bg: #e8f6ed;
  --cos-color-warning: #a35a05;
  --cos-color-warning-bg: #fdf3e2;
  --cos-color-danger: #b91c1c;
  --cos-color-danger-bg: #fdeaea;
  --cos-color-info: #1565c0;
  --cos-color-info-bg: #e7f0fb;
  --cos-color-neutral: #475569;
  --cos-color-neutral-bg: #eef1f5;

  --cos-color-focus: #1565c0;              /* distinct from brand teal so focus is never mistaken for "selected" */

  /* ── Tone palette (from the mockup): fills for charts/progress/office keys, soft tints, AA text inks ── */
  --cos-tone-teal: #14b8a6;   --cos-tone-teal-soft: #e3f6f3;   --cos-tone-teal-ink: #0f766e;
  --cos-tone-blue: #3b82f6;   --cos-tone-blue-soft: #e8f0fe;   --cos-tone-blue-ink: #1d4ed8;
  --cos-tone-purple: #8b5cf6; --cos-tone-purple-soft: #f0eafe; --cos-tone-purple-ink: #6d28d9;
  --cos-tone-red: #ef4444;    --cos-tone-red-soft: #fdeaea;    --cos-tone-red-ink: #b91c1c;
  --cos-tone-amber: #f59e0b;  --cos-tone-amber-soft: #fdf3e2;  --cos-tone-amber-ink: #92400e;
  --cos-tone-pink: #ec4899;   --cos-tone-pink-soft: #fde8f3;   --cos-tone-pink-ink: #be185d;
  --cos-tone-slate: #64748b;  --cos-tone-slate-soft: #eef1f5;  --cos-tone-slate-ink: #475569;

  /* ── Spacing (4-pt scale) ──────────────────────────── */
  --cos-space-1: 4px;
  --cos-space-2: 8px;
  --cos-space-3: 12px;
  --cos-space-4: 16px;
  --cos-space-5: 20px;
  --cos-space-6: 24px;
  --cos-space-8: 32px;
  --cos-space-10: 40px;
  --cos-space-12: 48px;
  --cos-space-16: 64px;

  /* ── Radius (restrained; pills are for badges/tags/filters only) ── */
  --cos-radius-sm: 6px;
  --cos-radius-md: 10px;
  --cos-radius-lg: 16px;             /* cards, as in the mockup */
  --cos-radius-tile: 12px;           /* pastel icon tiles */
  --cos-radius-pill: 999px;

  /* ── Elevation ─────────────────────────────────────── */
  --cos-shadow-0: none;
  --cos-shadow-1: 0 1px 2px rgba(13, 27, 42, .04), 0 6px 20px -8px rgba(13, 27, 42, .10);   /* card (mockup: soft, low, wide) */
  --cos-shadow-2: 0 10px 30px -10px rgba(13, 27, 42, .20);    /* popover, toast */
  --cos-shadow-3: 0 20px 56px -12px rgba(13, 27, 42, .30);    /* modal, drawer */

  /* ── Control heights ───────────────────────────────── */
  --cos-control-sm: 28px;
  --cos-control-md: 34px;
  --cos-control-lg: 42px;
  --cos-touch-target: 44px;                /* applied on coarse pointers */

  /* ── Typography ────────────────────────────────────── */
  /* System stack — identical to css/typography.css so no font asset or CSP change is needed. */
  --cos-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;   /* mockup type reads as Inter; SF Pro (macOS/iPad) is its closest system match */
  --cos-font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --cos-text-hero: 2.875rem;               /* 46px — greeting / “Your Day at a Glance” */
  --cos-text-display: 2.125rem;            /* 34px */
  --cos-text-page: 1.625rem;               /* 26px */
  --cos-text-section: 1.125rem;            /* 18px */
  --cos-text-subsection: 0.9375rem;        /* 15px */
  --cos-text-body: 0.875rem;               /* 14px */
  --cos-text-support: 0.8125rem;           /* 13px */
  --cos-text-label: 0.75rem;               /* 12px */
  --cos-text-meta: 0.75rem;                /* 12px */
  --cos-text-table-head: 0.6875rem;        /* 11px */

  --cos-weight-regular: 400;
  --cos-weight-medium: 500;
  --cos-weight-semibold: 600;
  --cos-weight-bold: 700;                  /* ceiling — hierarchy comes from size/space, not heavier weights */

  /* ── Layout ────────────────────────────────────────── */
  --cos-content-max: 1280px;
  --cos-sidebar-w: 248px;
  /* Sidebar treatment (css/shell_v2.css): calm vertical gradient, one icon colour, one active colour */
  --cos-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f7fbfc 52%, #eaf7f8 100%);
  --cos-nav-icon: #52657d;
  --cos-nav-icon-active: #009f9a;
  --cos-nav-hover-bg: rgba(0, 159, 154, 0.055);
  --cos-nav-active-bg: linear-gradient(90deg, #e8f9f7 0%, #f0fafb 100%);
  --cos-nav-transition: 160ms;
  --cos-mosaic-veil-alpha-narrow: 74%;
  --cos-mosaic-veil-alpha-edge: 28%;       /* ...and at the screen edges, where the mosaic is strongest */
  --cos-mosaic-veil-alpha: 68%;            /* how much of the page colour covers the global mosaic (css/shell_v2.css): light mode */
  --cos-topbar-h: 56px;
  --cos-page-gutter: var(--cos-space-8);

  /* ── Motion (fast by design) ───────────────────────── */
  --cos-duration-fast: 100ms;
  --cos-duration-base: 160ms;
  --cos-duration-overlay: 200ms;
  --cos-ease: cubic-bezier(.2, .0, .0, 1);

  /* ── Breakpoints (documentation for JS; CSS media queries use the literals) ──
     desktop ≥1280 · laptop 1024–1279 · tablet/iPad 768–1023 · small <768 (matches the app's existing 768 breakpoint) */
  --cos-bp-desktop: 1280px;
  --cos-bp-laptop: 1024px;
  --cos-bp-tablet: 768px;

  /* ── Layering ──────────────────────────────────────── */
  --cos-z-sticky: 20;
  --cos-z-overlay: 900;
  --cos-z-toast: 1000;
}

/* Dark: existing ClinicOS dark palette (app.css --bg/--bg2/--bg3/--ink). Applies wherever data-theme="dark" is set. */
[data-theme="dark"] {
  --cos-sidebar-bg: linear-gradient(180deg, #172936 0%, #132632 52%, #102d37 100%);
  --cos-nav-icon: #8aa9bd;
  --cos-nav-icon-active: #2dd4bf;
  --cos-nav-hover-bg: rgba(45, 212, 191, 0.07);
  --cos-nav-active-bg: linear-gradient(90deg, rgba(20, 184, 166, 0.18) 0%, rgba(20, 184, 166, 0.09) 100%);
  --cos-mosaic-veil-alpha-narrow: 85%;
  --cos-mosaic-veil-alpha-edge: 78%;
  --cos-mosaic-veil-alpha: 90%;            /* dark mode: only a faint trace of the mosaic */
  --cos-color-brand-primary: #14b8a6;
  --cos-color-brand-primary-hover: #2dd4bf;
  --cos-color-brand-accent: #2dd4bf;
  --cos-color-brand-accent-soft: #10302c;

  --cos-color-bg-app: #080e0d;
  --cos-color-bg-surface: #0f1917;
  --cos-color-bg-subtle: #162220;
  --cos-color-bg-selected: #13332f;
  --cos-color-bg-hover: #142320;
  --cos-color-bg-overlay: rgba(0, 0, 0, .6);

  --cos-color-text-primary: #f0fdf4;
  --cos-color-text-secondary: #bdc9c5;
  --cos-color-text-muted: #93a49e;
  --cos-color-text-inverse: #04110f;
  --cos-color-text-link: #2dd4bf;

  --cos-color-border: #24332f;
  --cos-color-border-subtle: #1b2825;
  --cos-color-border-strong: #3a5e55;

  --cos-color-success: #4ade80;
  --cos-color-success-bg: #10281a;
  --cos-color-warning: #fbbf24;
  --cos-color-warning-bg: #2b2110;
  --cos-color-danger: #f87171;
  --cos-color-danger-bg: #2f1414;
  --cos-color-info: #60a5fa;
  --cos-color-info-bg: #12233a;
  --cos-color-neutral: #cbd5d1;
  --cos-color-neutral-bg: #1a2724;

  --cos-color-focus: #60a5fa;

  --cos-tone-teal-soft: #10302c;   --cos-tone-teal-ink: #5eead4;
  --cos-tone-blue-soft: #12233a;   --cos-tone-blue-ink: #93c5fd;
  --cos-tone-purple-soft: #221a3d; --cos-tone-purple-ink: #c4b5fd;
  --cos-tone-red-soft: #2f1414;    --cos-tone-red-ink: #fca5a5;
  --cos-tone-amber-soft: #2b2110;  --cos-tone-amber-ink: #fcd34d;
  --cos-tone-pink-soft: #33132a;   --cos-tone-pink-ink: #f9a8d4;
  --cos-tone-slate-soft: #1a2724;  --cos-tone-slate-ink: #cbd5d1;

  --cos-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --cos-shadow-2: 0 4px 16px rgba(0, 0, 0, .5);
  --cos-shadow-3: 0 16px 48px rgba(0, 0, 0, .65);
}

/* Follow the OS when the app theme is "System" (the app writes data-theme="system" and relies on the media query). */
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
  --cos-sidebar-bg: linear-gradient(180deg, #172936 0%, #132632 52%, #102d37 100%);
  --cos-nav-icon: #8aa9bd;
  --cos-nav-icon-active: #2dd4bf;
  --cos-nav-hover-bg: rgba(45, 212, 191, 0.07);
  --cos-nav-active-bg: linear-gradient(90deg, rgba(20, 184, 166, 0.18) 0%, rgba(20, 184, 166, 0.09) 100%);
  --cos-mosaic-veil-alpha-narrow: 85%;
  --cos-mosaic-veil-alpha-edge: 78%;
  --cos-mosaic-veil-alpha: 90%;
  --cos-color-brand-primary: #14b8a6;
  --cos-color-brand-primary-hover: #2dd4bf;
  --cos-color-brand-accent: #2dd4bf;
  --cos-color-brand-accent-soft: #10302c;

  --cos-color-bg-app: #080e0d;
  --cos-color-bg-surface: #0f1917;
  --cos-color-bg-subtle: #162220;
  --cos-color-bg-selected: #13332f;
  --cos-color-bg-hover: #142320;
  --cos-color-bg-overlay: rgba(0, 0, 0, .6);

  --cos-color-text-primary: #f0fdf4;
  --cos-color-text-secondary: #bdc9c5;
  --cos-color-text-muted: #93a49e;
  --cos-color-text-inverse: #04110f;
  --cos-color-text-link: #2dd4bf;

  --cos-color-border: #24332f;
  --cos-color-border-subtle: #1b2825;
  --cos-color-border-strong: #3a5e55;

  --cos-color-success: #4ade80;
  --cos-color-success-bg: #10281a;
  --cos-color-warning: #fbbf24;
  --cos-color-warning-bg: #2b2110;
  --cos-color-danger: #f87171;
  --cos-color-danger-bg: #2f1414;
  --cos-color-info: #60a5fa;
  --cos-color-info-bg: #12233a;
  --cos-color-neutral: #cbd5d1;
  --cos-color-neutral-bg: #1a2724;

  --cos-color-focus: #60a5fa;

  --cos-tone-teal-soft: #10302c;   --cos-tone-teal-ink: #5eead4;
  --cos-tone-blue-soft: #12233a;   --cos-tone-blue-ink: #93c5fd;
  --cos-tone-purple-soft: #221a3d; --cos-tone-purple-ink: #c4b5fd;
  --cos-tone-red-soft: #2f1414;    --cos-tone-red-ink: #fca5a5;
  --cos-tone-amber-soft: #2b2110;  --cos-tone-amber-ink: #fcd34d;
  --cos-tone-pink-soft: #33132a;   --cos-tone-pink-ink: #f9a8d4;
  --cos-tone-slate-soft: #1a2724;  --cos-tone-slate-ink: #cbd5d1;

  --cos-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --cos-shadow-2: 0 4px 16px rgba(0, 0, 0, .5);
  --cos-shadow-3: 0 16px 48px rgba(0, 0, 0, .65);
}
}

/* Coarse pointers (iPad): raise interactive targets without changing desktop density. */
@media (pointer: coarse) {
  :root {
    --cos-control-sm: 36px;
    --cos-control-md: 42px;
    --cos-control-lg: 48px;
  }
}