/* ==========================================================================
   InfiArtt — Design Tokens
   SATU-SATUNYA tempat warna, huruf, jarak, dan bayangan didefinisikan.
   Ganti desain = ganti nilai di file ini. View PHP tidak boleh menulis warna
   sendiri (dijaga oleh scripts/check_view_colors.php).

   Dimuat oleh semua layout SEBELUM stylesheet lain:
   src/Views/layouts/header.php, src/Views/kb/*.php
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   Semua pasangan teks diukur dengan rumus kontras WCAG 2.x dan >= 7:1 (AAA)
   terhadap --color-bg, --color-surface dan --color-surface-2.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* ── Latar (mode terang) ── */
  --color-bg:              #ffffff;
  --color-surface:         #f4f8fb;
  --color-surface-2:       #eaeef3;

  /* Border dekoratif (kartu, pemisah). Border input memakai --color-border-hover
     agar memenuhi 3:1 (SC 1.4.11). */
  --color-border:          #b1b4b6;
  --color-border-hover:    #6f777b;   /* 4.56:1 */

  /* ── Brand: ungu tua ──
     --color-primary       : latar, border, isian (teks putih di atasnya 10.86:1)
     --color-primary-text  : ungu untuk TEKS (>= 9.59:1)
     --color-primary-solid : latar pekat untuk teks putih */
  --color-primary:         #4c2882;
  --color-primary-dark:    #3d2466;
  --color-primary-foreground: #ffffff;
  --color-primary-text:    #4c2882;
  --color-primary-rgb:     76, 40, 130; /* sRGB dari --color-primary, untuk rgba() di style inline */
  --color-primary-solid:   #4c2882;

  /* ── Sekunder: teal tua ── */
  --color-secondary:       #00585a;   /* 7.09:1 di surface-2; teks putih di atasnya 8.26:1 */
  --color-secondary-foreground: #ffffff;

  /* ── Status (aman sebagai teks dan sebagai latar teks putih) ── */
  --color-accent:          #6e3b00;   /* amber tua, 7.87:1 */
  --color-danger:          #a00d1b;   /* putih di atasnya 8.18:1 */
  --color-success:         #005a30;   /* putih di atasnya 8.38:1 */
  --color-warning:         #6e3b00;

  /* Latar lembut untuk kotak status (alert, catatan). Teks status di atasnya >= 7:1. */
  --color-danger-bg:       #fbeaec;
  --color-success-bg:      #e6f4ec;
  --color-warning-bg:      #fdf3e1;
  --color-info-bg:         #f1ecf9;   /* tint ungu brand */

  /* Lapisan */
  --color-surface-raised:  #ffffff;   /* kartu/kolom input di atas surface */
  --color-overlay:         rgb(11 12 12 / 0.6);   /* latar belakang modal */

  /* Glow dihapus: token tetap ada agar aturan lama tidak rusak,
     aturannya sendiri dibersihkan di langkah 2. */
  --color-primary-glow:    transparent;
  --color-secondary-glow:  transparent;
  --color-danger-glow:     transparent;
  --color-success-glow:    transparent;
  --color-warning-glow:    transparent;

  /* ── Teks ── */
  --color-text:            #0b0c0c;   /* 19.59:1 */
  --color-text-muted:      #484949;   /*  9.03:1, 7.98:1 di surface-2 */
  --color-text-dim:        #484949;
  --color-code-bg:         #eaeef3;

  /* ── Tautan & fokus (GOV.UK / W3C) ── */
  --color-link:            #004b87;   /* 8.91:1 */
  --color-link-visited:    #75336c;   /* 8.58:1 */
  --color-focus:           #ffdd00;
  --color-focus-text:      #0b0c0c;   /* 14.55:1 di atas kuning */

  /* Cincin fokus: garis gelap di dalam halo kuning, terlihat di latar apa pun.
     Pakai berdua:  outline: var(--focus-outline); box-shadow: var(--focus-halo); */
  --focus-outline:         3px solid var(--color-focus-text);
  --focus-halo:            0 0 0 6px var(--color-focus);

  /* Typography */
  --font-sans:  'Atkinson Hyperlegible Next', 'Noto Sans', Arial, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Fluid Font Sizes using clamp()
     Isi 17px (HP) sampai 19px (desktop) seperti GOV.UK.
     H1 ≈ --text-4xl (32→48px), H2 ≈ --text-3xl (24→32px), H3 ≈ --text-2xl (20→24px). */
  --text-xs:   clamp(0.875rem, 0.3vw + 0.8rem, 0.9375rem);
  --text-sm:   clamp(0.9375rem, 0.4vw + 0.85rem, 1.0625rem);
  --text-base: clamp(1.0625rem, 0.5vw + 0.95rem, 1.1875rem);
  --text-lg:   clamp(1.1875rem, 0.6vw + 1.05rem, 1.3125rem);
  --text-xl:   clamp(1.25rem, 0.8vw + 1.05rem, 1.5rem);
  --text-2xl:  clamp(1.25rem, 1vw + 1rem, 1.5rem);
  --text-3xl:  clamp(1.5rem, 2vw + 1rem, 2rem);
  --text-4xl:  clamp(2rem, 3vw + 1.25rem, 3rem);

  /* Fluid Spacing Scale */
  --space-1:  clamp(0.25rem, 0.5vw, 0.375rem);
  --space-2:  clamp(0.5rem, 1vw, 0.75rem);
  --space-3:  clamp(0.75rem, 1.5vw, 1rem);
  --space-4:  clamp(1rem, 2vw, 1.25rem);
  --space-5:  clamp(1.25rem, 2.5vw, 1.5rem);
  --space-6:  clamp(1.5rem, 3vw, 2rem);
  --space-8:  clamp(2rem, 4vw, 2.5rem);
  --space-10: clamp(2.5rem, 5vw, 3rem);
  --space-12: clamp(3rem, 6vw, 4rem);
  --space-16: clamp(4rem, 8vw, 6rem);
  --space-20: clamp(5rem, 10vw, 8rem);

  /* Border Radius */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* Shadows: datar, tanpa glow */
  --shadow-sm:      0 1px 2px rgb(11 12 12 / 0.08);
  --shadow-md:      0 2px 6px rgb(11 12 12 / 0.10);
  --shadow-lg:      0 4px 12px rgb(11 12 12 / 0.12);
  --shadow-primary: var(--shadow-sm);
  --shadow-secondary: var(--shadow-sm);

  /* GPU-Accelerated Purposeful Motion */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container-max:        1200px;
  --container-narrow-max: 800px;
  --container-wide-max:   1400px;
  --navbar-height:        70px;
  --sidebar-width:        260px;
}

/* ── Mode gelap ──
   Berlaku bila sistem gelap dan pengguna tidak memilih "Terang",
   atau bila pengguna memilih "Gelap" (data-theme="dark" di <html>).
   Palet dari Wikipedia; semua teks >= 7:1 di bg, surface dan surface-2. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:              #101418;
    --color-surface:         #1b1f24;
    --color-surface-2:       #262a30;
    --color-border:          #4a4f55;
    --color-border-hover:    #8f959c;   /* 6.12:1 */

    /* Isian ungu tetap cukup gelap untuk teks putih (5.65:1) dan terlihat di bg (3.27:1) */
    --color-primary:         #7650c4;
    --color-primary-dark:    #5e3ea6;
    --color-primary-text:    #c4b5f5;   /* 9.93:1, 7.74:1 di surface-2 */
    --color-primary-rgb:     118, 80, 196;
    --color-primary-solid:   #4c2882;   /* teks putih 10.86:1 */

    --color-secondary:       #5fd3cf;
    --color-secondary-foreground: #101418;

    --color-accent:          #ffc266;
    --color-danger:          #ffa8a5;
    --color-success:         #6ee7a0;
    --color-warning:         #ffc266;

    --color-danger-bg:       #3a1517;

    --color-success-bg:      #10301f;

    --color-warning-bg:      #3a2a10;

    --color-info-bg:         #2a2140;

    --color-surface-raised:  #1b1f24;

    --color-overlay:         rgb(0 0 0 / 0.7);


    --color-text:            #eaecf0;   /* 15.64:1 */
    --color-text-muted:      #b4bac1;
    --color-text-dim:        #b4bac1;
    --color-code-bg:         #262a30;

    --color-link:            #9cc0ff;   /* 10.04:1 */
    --color-link-visited:    #c4b5f5;
    --color-focus:           #ffdd00;
    --color-focus-text:      #101418;

    --shadow-sm:      0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md:      0 2px 6px rgb(0 0 0 / 0.45);
    --shadow-lg:      0 4px 12px rgb(0 0 0 / 0.5);
  }
}

:root[data-theme="dark"] {
  --color-bg:              #101418;
  --color-surface:         #1b1f24;
  --color-surface-2:       #262a30;
  --color-border:          #4a4f55;
  --color-border-hover:    #8f959c;

  --color-primary:         #7650c4;
  --color-primary-dark:    #5e3ea6;
  --color-primary-text:    #c4b5f5;
  --color-primary-rgb:     118, 80, 196;
  --color-primary-solid:   #4c2882;

  --color-secondary:       #5fd3cf;
  --color-secondary-foreground: #101418;

  --color-accent:          #ffc266;
  --color-danger:          #ffa8a5;
  --color-success:         #6ee7a0;
  --color-warning:         #ffc266;

  --color-danger-bg:       #3a1517;

  --color-success-bg:      #10301f;

  --color-warning-bg:      #3a2a10;

  --color-info-bg:         #2a2140;

  --color-surface-raised:  #1b1f24;

  --color-overlay:         rgb(0 0 0 / 0.7);


  --color-text:            #eaecf0;
  --color-text-muted:      #b4bac1;
  --color-text-dim:        #b4bac1;
  --color-code-bg:         #262a30;

  --color-link:            #9cc0ff;
  --color-link-visited:    #c4b5f5;
  --color-focus:           #ffdd00;
  --color-focus-text:      #101418;

  --shadow-sm:      0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md:      0 2px 6px rgb(0 0 0 / 0.45);
  --shadow-lg:      0 4px 12px rgb(0 0 0 / 0.5);
}

:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Alias lama halaman Knowledge Base (src/Views/kb/*.php).
   Hanya menunjuk ke token di atas, jadi ikut berganti tema. Jangan diberi
   nilai warna sendiri; kode baru langsung pakai --color-*.
   -------------------------------------------------------------------------- */
:root {
    --kb-bg: var(--color-bg);
    --kb-sidebar: var(--color-surface);
    --kb-bg-card: var(--color-surface-raised);
    --kb-hover: var(--color-surface-2);
    --kb-border: var(--color-border);
    --kb-text: var(--color-text);
    --kb-text-dim: var(--color-text-muted);
    --kb-accent: var(--color-primary-text);
    --kb-accent-hover: var(--color-primary-text);
    --kb-primary: var(--color-primary);
    --kb-focus: var(--color-focus);
}