/*
 * Copyright 2026 KYNODE
 * Licensed under the Apache License, Version 2.0.
 *
 * KYNODE Pediatric Local Node — Design Tokens
 * Mirrors the main KYNODE platform design system.
 * Multi-theme: Light (default), Dark Professional.
 */

/* ── Inter Variable, self-hosted for offline-first ──
   `font-display: optional` keeps Largest Contentful Paint fast even on
   first cold load: the browser uses the fallback if Inter doesn't arrive
   in ~100 ms, and quietly swaps it in for subsequent navigations. The
   font is small (~110 KB Latin subset, served gzipped at ~85 KB) and
   preloaded, so on real connections the swap completes inside the
   100 ms budget and Inter actually shows. The trade-off vs `swap`: a
   very-slow first visit will see system fonts instead of Inter; every
   visit after that will see Inter from the disk cache. We accept that
   trade-off because (a) once cached the experience is identical, and
   (b) the alternative `swap` causes a layout-affecting font swap that
   triggers a second LCP event ~1 second in. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url("/static/fonts/InterVariable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0300-0301, U+0303-0304, U+0309, U+0323, U+0329, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════
   THEME: Light (default)
   Stone neutrals, KYNODE emerald primary, WCAG AAA on white.
   ═══════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* iOS / Android safe-area insets (notch, Dynamic Island, home indicator).
     Native shells may inject explicit pixel values via these custom props;
     the fallback is the CSS env() which the browser resolves to 0px on
     non-notched devices. */
  --safe-area-top: var(--native-safe-area-top, env(safe-area-inset-top, 0px));
  --safe-area-right: var(--native-safe-area-right, env(safe-area-inset-right, 0px));
  --safe-area-bottom: var(--native-safe-area-bottom, env(safe-area-inset-bottom, 0px));
  --safe-area-left: var(--native-safe-area-left, env(safe-area-inset-left, 0px));

  /* Backgrounds */
  --bg-primary: #fafaf9;
  --bg-secondary: #f5f5f4;
  --bg-card: #ffffff;
  --bg-card-hover: #f5f5f4;
  --bg-glass: rgba(255, 255, 255, 0.88);
  --bg-input: #ffffff;
  --bg-muted: #fafaf9;

  /* Surfaces with internal contrast (modals, overlays, glass cards) */
  --card-glass-border: rgba(0, 0, 0, 0.06);
  --spinner-overlay-bg: rgba(250, 250, 249, 0.88);
  --scrim-bg: rgba(15, 23, 33, 0.45);

  /* Filter applied to native date inputs in dark mode (no-op in light) */
  --date-picker-filter: none;

  /* Gradient applied to large stat numbers / hero figures */
  --stat-number-gradient: var(--primary-gradient);

  /* Text */
  --text-primary: #1c1917;
  --text-secondary: #44403c;
  --text-muted: #57534e;
  --text-on-accent: #ffffff;
  --text-inverted: #fafaf9;

  /* KYNODE primary (emerald) */
  --primary: #10b981;
  --primary-dark: #059669;
  /* Darker emerald for surfaces that carry white text and need to clear
     WCAG AA contrast at normal weight (4.5:1). emerald-800 vs #fff = 6.05:1. */
  --primary-darker: #065f46;
  --primary-bg: rgba(16, 185, 129, 0.08);
  --primary-border: rgba(16, 185, 129, 0.2);
  --primary-gradient: linear-gradient(135deg, #10b981, #14b8a6);
  --primary-shadow: rgba(16, 185, 129, 0.25);

  /* Accent unified with primary */
  --accent: var(--primary);
  --accent-glow: var(--primary-bg);
  --accent-dark: var(--primary-dark);
  --accent-light: #34d399;

  /* Semantic */
  --red: #dc2626;
  --red-bg: rgba(220, 38, 38, 0.08);
  --red-border: rgba(220, 38, 38, 0.2);

  --yellow: #d97706;
  --yellow-bg: rgba(217, 119, 6, 0.08);
  --yellow-border: rgba(217, 119, 6, 0.2);

  --green: var(--primary-dark);
  --green-bg: var(--primary-bg);
  --green-border: var(--primary-border);

  --teal: #0d9488;
  --teal-bg: rgba(13, 148, 136, 0.08);

  --blue: #0d9488;
  --blue-bg: rgba(13, 148, 136, 0.08);

  /* Borders */
  --border: rgba(0, 0, 0, 0.08);
  --border-light: rgba(0, 0, 0, 0.06);
  --border-strong: rgba(0, 0, 0, 0.12);

  /* Shadows — soft for light backgrounds */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-glow: none;

  /* Surface highlights */
  --highlight-row: rgba(16, 185, 129, 0.04);
  --selection-bg: rgba(16, 185, 129, 0.15);
}

/* ═══════════════════════════════════════════════════════════
   THEME: Dark Professional (OLED-friendly)
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  color-scheme: dark;

  /* Safe-area insets re-declared so they cascade in the dark theme block.
     Same env() resolution; native shells may override per-platform. */
  --safe-area-top: var(--native-safe-area-top, env(safe-area-inset-top, 0px));
  --safe-area-right: var(--native-safe-area-right, env(safe-area-inset-right, 0px));
  --safe-area-bottom: var(--native-safe-area-bottom, env(safe-area-inset-bottom, 0px));
  --safe-area-left: var(--native-safe-area-left, env(safe-area-inset-left, 0px));

  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-card: #0a0a0a;
  --bg-card-hover: #171717;
  --bg-glass: rgba(10, 10, 10, 0.92);
  --bg-input: #0a0a0a;
  --bg-muted: #0a0a0a;

  /* Dark surfaces */
  --card-glass-border: #27272a;
  --spinner-overlay-bg: rgba(0, 0, 0, 0.90);
  --scrim-bg: rgba(0, 0, 0, 0.65);

  /* Mirror the trick from KYNODE main: rotate the native date-picker chrome
     into the emerald palette so it stops looking like a system pop-out. */
  --date-picker-filter: invert(0.85) sepia(100%) saturate(300%) hue-rotate(120deg) brightness(85%) contrast(110%);

  --stat-number-gradient: var(--primary-gradient);

  --text-primary: #fafafa;
  --text-secondary: #d4d4d8;
  --text-muted: #8b8b93;
  --text-on-accent: #ffffff;
  --text-inverted: #1c1917;

  --primary: #10b981;
  --primary-dark: #059669;
  /* Darker emerald carries the same role as in light mode (high-contrast
     surfaces with white text). emerald-800 stays visible against the OLED
     near-black background while keeping the brand. */
  --primary-darker: #047857;
  --primary-bg: rgba(16, 185, 129, 0.10);
  --primary-border: rgba(16, 185, 129, 0.25);
  --primary-gradient: linear-gradient(135deg, #10b981, #14b8a6);
  --primary-shadow: rgba(16, 185, 129, 0.20);

  --accent: var(--primary);
  --accent-glow: var(--primary-bg);
  --accent-dark: var(--primary-dark);
  --accent-light: #34d399;

  --red: #ef4444;
  --red-bg: rgba(239, 68, 68, 0.10);
  --red-border: rgba(239, 68, 68, 0.25);

  --yellow: #f59e0b;
  --yellow-bg: rgba(245, 158, 11, 0.10);
  --yellow-border: rgba(245, 158, 11, 0.25);

  --green: var(--primary);
  --green-bg: var(--primary-bg);
  --green-border: var(--primary-border);

  --teal: #14b8a6;
  --teal-bg: rgba(20, 184, 166, 0.10);

  --blue: #14b8a6;
  --blue-bg: rgba(20, 184, 166, 0.10);

  --border: #27272a;
  --border-light: #3f3f46;
  --border-strong: #52525b;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7);
  --shadow-glow: none;

  --highlight-row: rgba(16, 185, 129, 0.06);
  --selection-bg: rgba(16, 185, 129, 0.25);
}

/* ═══════════════════════════════════════════════════════════
   Shared tokens (theme-independent)
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* Legacy alias: matches the main KYNODE platform's `--font` variable name
     so component CSS can be lifted between projects with no rename. */
  --font: var(--font-sans);

  /* Type scale */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;

  /* Line height */
  --leading-tight: 1.25;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

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

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index scale */
  --z-base: 1;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-modal: 1000;
  --z-toast: 2000;

  /* Layout */
  --sidebar-width: 264px;
  --topbar-height: 64px;
  --content-max-width: 1440px;
}

/* ── Reset & base ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-primary);
  min-height: 100vh;
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--selection-bg);
  color: var(--text-primary);
}

/* ── Visually hidden utility ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Focus ring ── */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}