/*
  AI Mentor v2 · token tampilan dari brand kit FastTrack v2
  Disusun Marco (CMO TLM), 10 Nov 2026. Siap disalin Cito ke aplikasi Next.js.
  Sumber warna: memory/reference_brand-kit.md (emas #C39241 dan hitam #000000 diukur dari file logo asli;
  putih #FFFFFF; business context TOF b.48 "Warna wajib: emas #C39241, hitam #000000, putih #FFFFFF").
  Warna tambahan hanya gradasi emas dan abu netral (aturan brand kit di CLAUDE.md semua agent).
  Merah #E5484D sudah ada di papan brand kit v2 sebagai tanda "jangan" (--no); di aplikasi hanya untuk
  ikon dan garis tepi status gagal atau habis, tidak pernah sebagai isi bidang besar dan tidak di atas emas.
  Rasio kontras dihitung Marco dengan rumus WCAG 2.x (luminans relatif), lihat 01_panduan-tampilan.md bagian 2.
  Font Montserrat: usulan brand kit yang belum dikonfirmasi Trisna (isu MRC:I-401). Kalau font resmi
  diputuskan lain, cukup ganti --font-sans.
*/

:root {
  /* ---------- Warna inti brand (jangan diubah) ---------- */
  --brand-gold: #C39241;        /* emas logo. Teks emas HANYA di atas hitam atau abu gelap (7,5 : 1 di hitam) */
  --brand-black: #000000;       /* latar utama */
  --brand-white: #FFFFFF;       /* teks di latar gelap, kertas dokumen */

  /* ---------- Gradasi emas ---------- */
  --gold-50:  #FBF6EC;          /* latar terang bernuansa emas (kartu kertas, sorotan ringan) */
  --gold-100: #F3E7CF;
  --gold-200: #E6CFA0;          /* garis tepi di latar terang */
  --gold-300: #D6B172;          /* emas terang untuk grafik seri ke-2 */
  --gold-500: #C39241;          /* = --brand-gold */
  --gold-700: #8F6A2F;          /* emas tua: SATU-SATUNYA emas untuk teks di latar putih (4,9 : 1) */
  --gold-900: #4A3718;          /* emas sangat gelap: isi lencana, jalur grafik di latar hitam */
  --gold-hair: rgba(195, 146, 65, 0.55);  /* garis tipis emas (sama dengan brand kit --hair) */
  --gold-tint: rgba(195, 146, 65, 0.12);  /* latar sorotan di hitam (sama dengan kotak "bacaan" brand kit) */

  /* ---------- Abu netral (mode gelap) ---------- */
  --gray-950: #000000;          /* latar halaman */
  --gray-900: #111111;          /* kartu */
  --gray-850: #1A1A1A;          /* kartu terangkat, kolom input */
  --gray-800: #262626;          /* jalur bar kuota, pemisah tebal */
  --gray-700: #3A3A3A;          /* garis tepi input */
  --gray-500: #6B6B6B;          /* teks nonaktif saja (3,9 : 1 di hitam, tidak untuk teks biasa) */
  --gray-400: #A3A3A3;          /* teks pendukung (8,3 : 1 di hitam; 6,9 : 1 di #1A1A1A) */
  --gray-100: #EDEDED;
  --line-soft: rgba(255, 255, 255, 0.16); /* garis pemisah halus (brand kit --soft) */

  /* ---------- Warna fungsi ---------- */
  --stop: #E5484D;              /* gagal, kuota habis, masa aktif habis: ikon + garis tepi + teks pendek di #000 atau #111 saja */
  --stop-tint: rgba(229, 72, 77, 0.10);

  /* ---------- Peran warna (pakai ini di komponen, bukan hex langsung) ---------- */
  --bg: var(--gray-950);
  --surface: var(--gray-900);
  --surface-raised: var(--gray-850);
  --text: var(--brand-white);
  --text-muted: var(--gray-400);
  --text-disabled: var(--gray-500);
  --accent: var(--brand-gold);
  --on-accent: var(--brand-black);      /* teks di atas emas SELALU hitam. Putih di emas 2,8 : 1 = dilarang */
  --border: var(--line-soft);
  --border-strong: var(--gray-700);
  --focus: var(--brand-gold);
  --paper: var(--brand-white);          /* pratinjau dokumen Word/PowerPoint */
  --on-paper: #141210;                  /* teks di kertas (sama dengan teks diagram rancangan v8) */
  --on-paper-accent: var(--gold-700);

  /* ---------- Status data di dokumen ---------- */
  --status-aktual-bg: var(--brand-gold);   /* lencana isi emas, teks hitam, ikon bulat penuh */
  --status-aktual-fg: var(--brand-black);
  --status-asumsi-bg: transparent;         /* garis tepi emas 1,5px, teks emas, ikon setengah bulat */
  --status-asumsi-fg: var(--brand-gold);
  --status-simulasi-bg: transparent;       /* garis putus-putus abu, teks abu terang, ikon bulat kosong */
  --status-simulasi-fg: var(--gray-100);
  --status-simulasi-border: var(--gray-400);

  /* ---------- Huruf ---------- */
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Ukuran HP (lebar < 640px). Desktop: lihat @media di bawah */
  --fs-display: 24px;  --lh-display: 32px;   /* judul halaman */
  --fs-h2: 20px;       --lh-h2: 28px;
  --fs-h3: 18px;       --lh-h3: 26px;
  --fs-body: 16px;     --lh-body: 24px;      /* minimum 16px di kolom isian supaya HP tidak memperbesar layar */
  --fs-chat: 16px;     --lh-chat: 26px;
  --fs-small: 14px;    --lh-small: 20px;
  --fs-label: 12px;    --lh-label: 16px;     /* lencana status, huruf kapital, jarak huruf 0.06em */
  --fs-button: 16px;   --lh-button: 24px;
  --measure: 68ch;                           /* lebar baris maksimal untuk teks panjang */

  /* ---------- Jarak (kelipatan 4) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ---------- Sudut ---------- */
  --radius-pill: 999px;   /* tombol (brand kit: "tombol pil dengan panah") */
  --radius-card: 16px;
  --radius-input: 12px;
  --radius-badge: 6px;    /* lencana status sengaja kotak membulat supaya tidak tertukar dengan tombol */

  /* ---------- Ukuran sentuh dan fokus ---------- */
  --tap-min: 44px;        /* tinggi atau lebar minimum semua yang bisa diketuk */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);

  /* ---------- Tata letak ---------- */
  --sidebar-w: 248px;
  --chat-panel-w: 420px;
  --content-max: 1200px;
  --bottom-nav-h: 64px;
}

@media (min-width: 1024px) {
  :root {
    --fs-display: 32px;  --lh-display: 40px;
    --fs-h2: 24px;       --lh-h2: 32px;
    --fs-h3: 20px;       --lh-h3: 28px;
  }
}

/* Gerak dikurangi untuk pengguna yang memintanya di HP atau laptop */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/*
  Potongan Tailwind (tailwind.config, theme.extend) kalau Cito memakai Tailwind:

  colors: {
    gold: { 50:'#FBF6EC',100:'#F3E7CF',200:'#E6CFA0',300:'#D6B172',500:'#C39241',700:'#8F6A2F',900:'#4A3718', DEFAULT:'#C39241' },
    ink:  { 950:'#000000',900:'#111111',850:'#1A1A1A',800:'#262626',700:'#3A3A3A',500:'#6B6B6B',400:'#A3A3A3',100:'#EDEDED' },
    stop: '#E5484D',
  },
  fontFamily: { sans: ['Montserrat','system-ui','-apple-system','Segoe UI','Roboto','Arial','sans-serif'] },
  borderRadius: { pill:'999px', card:'16px', input:'12px', badge:'6px' },
*/