/* ==========================================================================
   Dermaesthetics Group — brand foundation (dermaesthetics-core)
   The single source of truth for colour, type, and shape shared by every group
   application. Ported from the Legal Management System design system.

   No external dependencies: fonts are self-hosted (served next to this file), no
   CDN is called. Serve this file and its sibling `fonts/` directory from one
   static path so the relative @font-face URLs resolve.

   Rule: never write a hex value in a component — use a --token.
   Dark mode is the base; light mode overrides it, either by user choice
   ([data-tema="terang"]) or by system preference (prefers-color-scheme: light).
   ========================================================================== */

/* ---------- Fonts (self-hosted, relative to this stylesheet) ---------- */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/IBMPlexSans-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/IBMPlexSans-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/IBMPlexSans-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/IBMPlexSans-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/IBMPlexMono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/IBMPlexMono-600.woff2') format('woff2')}

/* ==========================================================================
   TOKENS — base values are DARK mode.
   ========================================================================== */
:root{
  /* Identity — the tosca accent */
  --aksen:#249D98;
  --aksen-lembut:rgba(36,157,152,.14);
  --aksen-kontras:#08201F;

  /* Surfaces and lines */
  --latar:#0E1A20;
  --permukaan:#16242C;
  --permukaan-naik:#1E3039;
  --sidebar:#0B151A;
  --garis:#26383F;
  --garis-tegas:#547481;

  /* Text */
  --teks:#E8EDEF;
  --teks-2:#A9B7BD;
  --teks-3:#7A8C95;

  /* Status palette — five colours. The COLOURS are group identity; their
     MEANING is defined by each application, not here. */
  --st-merah:#E5614F;
  --st-oranye:#E0913B;
  --st-hijau:#3AA971;
  --st-hitam:#8894A0;
  --st-abu:#7E8C94;
  --st-merah-bg:rgba(229,97,79,.14);
  --st-oranye-bg:rgba(224,145,59,.14);
  --st-hijau-bg:rgba(58,169,113,.14);
  --st-hitam-bg:rgba(0,0,0,.40);
  --st-abu-bg:rgba(126,140,148,.14);

  /* Support colours — rarely used */
  --info:#3F8FCB;
  --peringatan:#D9A21B;
  --info-bg:rgba(63,143,203,.14);
  --peringatan-bg:rgba(217,162,27,.12);

  /* Sidebar is always dark in both modes */
  --sb-teks:#C4D0D4;
  --sb-teks-2:#7E9198;
  --sb-aktif:rgba(255,255,255,.07);
  --sb-garis:rgba(255,255,255,.08);

  /* Shape */
  --r:10px; --r-sm:7px; --r-pill:999px;
  --bayang:0 1px 2px rgba(0,0,0,.35);
  --bayang-2:0 8px 24px rgba(0,0,0,.45);

  /* Frame sizes */
  --lebar-sidebar:260px;
  --lebar-sidebar-sempit:68px;
  --tinggi-topbar:64px;
  --padding-isi:24px;

  /* Motion */
  --gerak-panel:140ms;
  --gerak-baris:80ms;
  --gerak-toast:150ms;

  --panah:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A9B7BD' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Light mode — by system preference (unless the user forced dark) */
@media (prefers-color-scheme:light){
  :root:not([data-tema="gelap"]){
    --aksen:#157A76;
    --aksen-lembut:rgba(21,122,118,.10);
    --aksen-kontras:#FFFFFF;
    --latar:#F4F6F7;
    --permukaan:#FFFFFF;
    --permukaan-naik:#FFFFFF;
    --sidebar:#101E24;
    --garis:#DFE5E7;
    --garis-tegas:#7F949D;
    --teks:#16242C;
    --teks-2:#4E6169;
    --teks-3:#6A797E;
    --st-merah:#C2402E;
    --st-oranye:#A96514;
    --st-hijau:#1F8552;
    --st-hitam:#3A444B;
    --st-abu:#6B777D;
    --st-merah-bg:rgba(194,64,46,.10);
    --st-oranye-bg:rgba(185,111,22,.10);
    --st-hijau-bg:rgba(31,133,82,.10);
    --st-hitam-bg:rgba(58,68,75,.10);
    --st-abu-bg:rgba(122,135,141,.12);
    --info-bg:rgba(63,143,203,.10);
    --peringatan-bg:rgba(217,162,27,.14);
    --bayang:0 1px 2px rgba(16,32,48,.06), 0 1px 3px rgba(16,32,48,.04);
    --bayang-2:0 8px 24px rgba(16,32,48,.12);
    --panah:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234E6169' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }
}

/* Light mode — forced by the user via [data-tema="terang"] */
:root[data-tema="terang"]{
  --aksen:#157A76;
  --aksen-lembut:rgba(21,122,118,.10);
  --aksen-kontras:#FFFFFF;
  --latar:#F4F6F7;
  --permukaan:#FFFFFF;
  --permukaan-naik:#FFFFFF;
  --sidebar:#101E24;
  --garis:#DFE5E7;
  --garis-tegas:#7F949D;
  --teks:#16242C;
  --teks-2:#4E6169;
  --teks-3:#6A797E;
  --st-merah:#C2402E;
  --st-oranye:#A96514;
  --st-hijau:#1F8552;
  --st-hitam:#3A444B;
  --st-abu:#6B777D;
  --st-merah-bg:rgba(194,64,46,.10);
  --st-oranye-bg:rgba(185,111,22,.10);
  --st-hijau-bg:rgba(31,133,82,.10);
  --st-hitam-bg:rgba(58,68,75,.10);
  --st-abu-bg:rgba(122,135,141,.12);
  --info-bg:rgba(63,143,203,.10);
  --peringatan-bg:rgba(217,162,27,.14);
  --bayang:0 1px 2px rgba(16,32,48,.06), 0 1px 3px rgba(16,32,48,.04);
  --bayang-2:0 8px 24px rgba(16,32,48,.12);
  --panah:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234E6169' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ==========================================================================
   BASE — reset + typographic scale (element defaults only; components live
   in the templates layer / each app).
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.55;color:var(--teks);background:var(--latar);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
}
a{color:var(--aksen);text-decoration:none}
a:hover{text-decoration:underline}

/* A single focus ring for the whole interface */
:focus-visible{outline:2px solid var(--aksen);outline-offset:2px;border-radius:3px}

h1{font-size:24px;font-weight:600;line-height:1.25;letter-spacing:-.02em}
h2{font-size:18px;font-weight:600;line-height:1.3;margin:0 0 10px}
h3{font-size:15px;font-weight:600;line-height:1.3;color:var(--teks);margin:0 0 8px}

/* Labels in sentence case — never all-caps */
label,.label{display:block;font-size:12.5px;font-weight:500;line-height:1.3;
  color:var(--teks-2);margin:0 0 5px}
.kecil{font-size:12px;line-height:1.4;color:var(--teks-2)}
.teks-abu{color:var(--teks-3)}
.teks-merah{color:var(--st-merah);font-weight:600}

/* Structured data: document numbers, codes, checksums */
.mono,code,kbd{font-family:"IBM Plex Mono",Consolas,monospace;font-variant-ligatures:none}
code{font-size:13px;background:var(--permukaan-naik);border:1px solid var(--garis);
  padding:1px 6px;border-radius:5px;color:var(--teks-2)}

svg.ikon{width:18px;height:18px;flex-shrink:0;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.ikon-kecil{width:15px;height:15px}