/* Klinik BBMC TMS — stylesheet produksi (tokens + base digabung, tanpa @import) */

/* ==== tokens/fonts.css ==== */
/* Plus Jakarta Sans — substitution for the geometric grotesque used in the source mockups.
   IBM Plex Mono for dates and numerals — a humanist mono that reads warmer than
   the default geometric monos. Served from Google Fonts. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
:root{
  --font-display:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --font-body:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}


/* ==== tokens/colors.css ==== */
:root{
  /* ---- Brand teal (from the BBMC mark) ---- */
  --teal-50:#EAF8F5;--teal-100:#D3F1EA;--teal-200:#A7E3D6;--teal-300:#6DCFBC;
  --teal-400:#2FB79E;--teal-500:#13A88C;--teal-600:#0E8B74;--teal-700:#0B6F5C;
  --teal-800:#085445;--teal-900:#063B31;

  /* ---- Mint (bright teal — info, In Progress, highlights) ---- */
  --mint-50:#EAFBF6;--mint-100:#D2F5EC;--mint-200:#A9EADA;--mint-400:#4FD3B4;
  --mint-500:#16C79A;--mint-600:#0FA582;

  /* ---- Leaf (the lime green of the logo heart — success / done) ---- */
  --leaf-50:#F1F9E9;--leaf-100:#E1F3CF;--leaf-200:#C6E8A6;--leaf-400:#9BD35F;
  --leaf-500:#7DC242;--leaf-600:#63A32E;

  /* ---- Gold (the "KLINIK / BATUBULAN MEDICAL" gold — warnings, medium priority) ---- */
  --gold-50:#FDF7E6;--gold-100:#FAEAC2;--gold-200:#F5DC9A;--gold-400:#EFC04A;--gold-500:#E0A81C;--gold-600:#BE8A0D;

  /* ---- Coral (high priority, unread counters) ---- */
  --coral-50:#FEF2EF;--coral-100:#FBDED6;--coral-200:#F8C4B4;--coral-400:#FB8B6E;--coral-500:#F26B45;--coral-600:#D9522D;

  /* ---- Red (late / destructive) ---- */
  --red-50:#FEF0F0;--red-100:#FDDCDC;--red-500:#EF4444;--red-600:#DC2626;

  /* ---- Neutrals (green-leaning greys) ---- */
  --white:#FFFFFF;
  --neutral-50:#F9FBFA;--neutral-100:#F1F5F3;--neutral-200:#E4EBE8;--neutral-300:#CFD9D5;
  --neutral-400:#98A5A0;--neutral-500:#748079;--neutral-600:#57635D;--neutral-700:#45514B;
  --neutral-800:#26302B;--neutral-900:#14201B;
  --page-grey:#F2F5F3;

  /* ---- Semantic aliases ---- */
  --text-strong:var(--neutral-900);
  --text-body:var(--neutral-700);
  --text-muted:var(--neutral-500);
  --text-faint:var(--neutral-400);
  --text-on-brand:var(--white);
  --text-link:var(--teal-600);

  --surface-page:var(--page-grey);
  --surface-card:var(--white);
  --surface-sunken:var(--neutral-100);
  --surface-inverse:var(--teal-900);
  --surface-brand:var(--teal-500);
  --surface-brand-soft:var(--teal-100);

  --tint-teal:var(--teal-100);--tint-coral:var(--coral-50);--tint-mint:var(--mint-50);
  --tint-gold:var(--gold-50);--tint-leaf:var(--leaf-50);

  --border-subtle:var(--neutral-200);
  --border-default:var(--neutral-300);
  --border-strong:var(--neutral-400);
  --border-brand:var(--teal-400);
  --focus-ring:var(--teal-400);

  --status-todo:var(--neutral-500);
  --status-progress:var(--mint-600);
  --status-done:var(--leaf-600);
  --status-late:var(--red-500);

  --priority-low:var(--leaf-500);
  --priority-medium:var(--gold-500);
  --priority-high:var(--coral-500);

  /* ---- Gradients: the logo's teal → green → gold sweep ---- */
  --gradient-brand:linear-gradient(90deg,#13A88C 0%,#7DC242 60%,#E0A81C 100%); /* @kind color */
  --gradient-brand-diag:linear-gradient(135deg,#13A88C 0%,#7DC242 60%,#E0A81C 100%); /* @kind color */
  --gradient-teal:linear-gradient(135deg,#16C79A 0%,#0B6F5C 100%); /* @kind color */
  --gradient-leaf:linear-gradient(135deg,#9BD35F 0%,#13A88C 100%); /* @kind color */
  --gradient-stage:radial-gradient(120% 100% at 20% 0%,#12876F 0%,#0A5A4A 55%,#063B31 100%); /* @kind color */
  --stripe-overlay:repeating-linear-gradient(115deg,rgba(255,255,255,.45) 0 6px,rgba(255,255,255,0) 6px 12px); /* @kind color */
}


/* ==== tokens/typography.css ==== */
:root{
  --fs-display:36px;--fs-h1:28px;--fs-h2:22px;--fs-h3:18px;--fs-body-lg:16px;
  --fs-body:15px;--fs-sm:13px;--fs-xs:12px;--fs-micro:11px;
  --lh-tight:1.15; /* @kind font */
  --lh-snug:1.3; /* @kind font */
  --lh-normal:1.45; /* @kind font */
  --lh-loose:1.6; /* @kind font */
  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */
  --fw-extrabold:800; /* @kind font */
  --ls-tight:-0.02em; /* @kind font */
  --ls-snug:-0.01em; /* @kind font */
  --ls-normal:0; /* @kind font */
  --ls-wide:0.04em; /* @kind font */

  --text-display:var(--fw-extrabold) var(--fs-display)/var(--lh-tight) var(--font-display); /* @kind font */
  --text-h1:var(--fw-extrabold) var(--fs-h1)/var(--lh-tight) var(--font-display); /* @kind font */
  --text-h2:var(--fw-bold) var(--fs-h2)/var(--lh-snug) var(--font-display); /* @kind font */
  --text-h3:var(--fw-bold) var(--fs-h3)/var(--lh-snug) var(--font-display); /* @kind font */
  --text-body-default:var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-body); /* @kind font */
  --text-label:var(--fw-semibold) var(--fs-sm)/var(--lh-snug) var(--font-body); /* @kind font */
  --text-caption:var(--fw-medium) var(--fs-xs)/var(--lh-snug) var(--font-body); /* @kind font */
}


/* ==== tokens/spacing.css ==== */
:root{
  --space-0:0px;--space-1:2px;--space-2:4px;--space-3:6px;--space-4:8px;--space-5:12px;
  --space-6:16px;--space-7:20px;--space-8:24px;--space-9:32px;--space-10:40px;
  --space-11:48px;--space-12:64px;
  --gutter-page:24px;--gutter-card:20px;--gutter-field:12px;
  --sidebar-width:248px;--rail-width:64px;--topbar-height:86px;
  --content-max:1720px;
}


/* ==== tokens/radii.css ==== */
:root{
  --radius-xs:6px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;
  --radius-2xl:24px;--radius-3xl:28px;--radius-pill:999px;--radius-circle:50%;
  --radius-control:10px;--radius-card:16px;--radius-card-soft:20px;--radius-sheet:28px;
}


/* ==== tokens/elevation.css ==== */
:root{
  --surface-glass:rgba(255,255,255,.72);
  --surface-glass-strong:rgba(255,255,255,.86);
  --surface-glass-sunken:rgba(255,255,255,.45);
  --border-glass:rgba(255,255,255,.65);
  --blur-glass:saturate(150%) blur(16px); /* @kind other */
  --shadow-glass:0 1px 0 rgba(255,255,255,.7) inset, 0 10px 30px -12px rgba(20,32,27,.22);
  --glow-teal:0 0 0 1px rgba(19,168,140,.18), 0 12px 34px -14px rgba(19,168,140,.55);
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(20,32,27,.06);
  --shadow-sm:0 2px 6px rgba(20,32,27,.06);
  --shadow-md:0 6px 18px rgba(20,32,27,.08);
  --shadow-lg:0 14px 36px rgba(20,32,27,.10);
  --shadow-xl:0 28px 64px rgba(20,32,27,.16);
  --shadow-brand:0 10px 26px rgba(11,111,92,.30);
  --shadow-float:0 18px 34px -12px rgba(11,111,92,.34);
  --shadow-inset-line:inset 0 -1px 0 var(--border-subtle);
  --ring-focus:0 0 0 3px rgba(19,168,140,.28);
}


/* ==== tokens/motion.css ==== */
:root{
  --ease-standard:cubic-bezier(.2,.8,.3,1); /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
  --dur-instant:80ms; /* @kind other */
  --dur-fast:140ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-slow:320ms; /* @kind other */
  --dur-slower:520ms; /* @kind other */
  --transition-control:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard); /* @kind other */
  --press-scale:.97; /* @kind other */
  --lift-hover:translateY(-3px); /* @kind other */
  --lift-hover-strong:translateY(-5px); /* @kind other */
  --transition-float:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out); /* @kind other */
}


/* ==== tokens/base.css ==== */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:var(--text-body-default);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;color:var(--text-strong);letter-spacing:var(--ls-tight)}
h1{font:var(--text-h1)}h2{font:var(--text-h2)}h3{font:var(--text-h3)}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;transition:var(--transition-control)}
a:hover{color:var(--violet-700);text-decoration:underline}
button{font-family:inherit}
::selection{background:var(--violet-200);color:var(--violet-900)}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}