/* GensFlo Clay Design Tokens — v1  (TCK-0054)
   Salinan dari docs/design/clay_revamp/handoff/gensflo-clay-tokens.css (paket
   desain owner 17 Agt) + NILAI MODE GELAP yang ga ada di paket aslinya.

   Dimuat SEBELUM app.css: token ini bahan mentah, app.css yang makai. Kalau
   urutannya kebalik, aturan yang ngandelin token bakal baca nilai kosong.

   Warna dasarnya sengaja SAMA PERSIS sama app.css yang udah live — paket desain
   ini emang bukan ganti arah warna, cuma ngerapihin jadi token. Kalau nemu yang
   beda nilainya, itu tandanya salah baca, bukan izin buat ngubah yang live. */

:root {
  /* ── Core palette ── */
  --clay-ink:        #2b2a40;  /* primary text */
  --clay-ink-soft:   #6f6a8e;  /* secondary text, labels */
  --clay-ink-faint:  #a29dc0;  /* placeholder, disabled */
  --clay-bg:         #f1eefa;  /* page background base */
  --clay-surface:    #fdfcff;  /* card / raised surface */
  --clay-well:       #ebe7f8;  /* inset well, input bg, chip bg */
  --clay-well-deep:  #e2dcf5;  /* off-state knobs, deep insets */

  /* ── Brand (ungu) ── */
  --clay-primary:       #7355e8;
  --clay-primary-hi:    #9b7bff;  /* gradient top */
  --clay-primary-text:  #5b46cc;  /* link / badge text on light */
  --clay-primary-soft:  #ede7ff;  /* tinted card bg */

  /* ── Accents ── */
  --clay-mint:      #2f9d85;  --clay-mint-hi:  #8adcc8;  /* success */
  --clay-blue:      #4f7df7;  --clay-blue-hi:  #8fb0ff;  /* info */
  --clay-blue-mid:  #5b82e8;
  --clay-amber:     #e39a3b;  --clay-amber-hi: #ffd08a;  /* warning */
  --clay-rose:      #d84f6b;  --clay-rose-hi:  #f5a3b3;  /* danger / YouTube */

  /* ── Borders ── */
  --clay-border: 1px solid rgba(108, 92, 225, .14);

  /* ── Radii (puffy) ── */
  --clay-r-card:  28px;   /* section card */
  --clay-r-tile:  24px;   /* KPI tile */
  --clay-r-well:  18px;   /* inset row / well (16-20px range) */
  --clay-r-ctl:   14px;   /* button, input */
  --clay-r-icon:  12px;   /* icon chip (11-14px by size) */
  --clay-r-pill:  999px;

  /* ── Clay shadows ── */
  --clay-sh-card:   0 12px 26px rgba(104,92,180,.18), inset 0 2px 0 rgba(255,255,255,.9);
  --clay-sh-btn:    0 7px 14px rgba(104,92,180,.26), inset 0 2px 0 rgba(255,255,255,.9), inset 0 -3px 6px rgba(104,92,180,.14);
  --clay-sh-btn-primary: 0 10px 18px rgba(115,85,232,.42), inset 0 2px 0 rgba(255,255,255,.45), inset 0 -5px 9px rgba(0,0,0,.15);
  --clay-sh-inset:  inset 0 2px 6px rgba(104,92,180,.18);   /* wells & inputs */
  --clay-sh-chip:   inset 0 2px 0 rgba(255,255,255,.9);      /* flat pills */
  --clay-sh-icon:   0 6px 12px rgba(104,92,180,.22), inset 0 2px 0 rgba(255,255,255,.9);
  --clay-sh-pop:    0 18px 38px rgba(104,92,180,.3), inset 0 2px 0 rgba(255,255,255,.9);

  /* ── Gradients ── */
  --clay-grad-primary: linear-gradient(180deg, var(--clay-primary-hi), var(--clay-primary));
  --clay-grad-mint:    linear-gradient(180deg, var(--clay-mint-hi), var(--clay-mint));
  --clay-grad-blue:    linear-gradient(180deg, var(--clay-blue-hi), var(--clay-blue));
  --clay-grad-amber:   linear-gradient(180deg, var(--clay-amber-hi), var(--clay-amber));
  --clay-grad-rose:    linear-gradient(180deg, var(--clay-rose-hi), var(--clay-rose));
  --clay-grad-page:
    radial-gradient(800px 460px at 88% -6%, #e3dbff 0%, transparent 58%),
    radial-gradient(680px 420px at -6% 14%, #dfe8fd 0%, transparent 55%),
    var(--clay-bg);

  /* ── Type ── */
  --clay-font: 'Nunito', system-ui, sans-serif;  /* weights 600-900; body 700, headings 900 */
  --clay-fs-h1: 22px; --clay-fs-h2: 19px; --clay-fs-body: 13.5px;
  --clay-fs-label: 11px; /* + letter-spacing .08em, uppercase, weight 900 */

  /* ── Motion ── */
  --clay-ease-pop: cubic-bezier(.34, 1.56, .64, 1);  /* hover lift .32s */
  --clay-press: translateY(3px);                      /* :active on buttons */
}

/* ═══════════════════════════════════════════════════════════════════════════
   NILAI MODE GELAP — ditambahin GensFlo, ga ada di paket desain aslinya.
   (TCK-0054, syarat ke-2.)

   Paket desain cuma punya versi terang. Disalin mentah = mode gelap MATI:
   kartu putih terang di atas latar gelap, teks gelap di atas kartu gelap.
   App kita udah punya mode gelap yang jalan (`app.css`), jadi token di sini
   HARUS punya pasangannya — kalau engga, tiap komponen yang pindah ke token
   clay bakal rusak di mode gelap satu per satu, diam-diam.

   Nilainya BUKAN karangan: diambil dari `[data-theme="dark"]` di `app.css`
   yang udah live, biar dua sistem token ga pelan-pelan beda warna.

   Ditulis dua kali (data-theme + prefers-color-scheme) karena mode "ikut
   sistem" ga naruh atribut apa pun di html. Yang `prefers` dijaga
   `:not([data-theme="light"])` supaya user yang SENGAJA milih terang di
   laptop bertema gelap tetap dapet terang.
   ═════════════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"] {
  --clay-ink:        #eceafb;
  --clay-ink-soft:   #a8a2c8;
  --clay-ink-faint:  #7d769e;
  --clay-bg:         #16151f;
  --clay-surface:    #232132;
  --clay-well:       #1c1b2a;
  --clay-well-deep:  #15141f;

  --clay-primary:       #7355e8;
  --clay-primary-hi:    #9b7bff;
  --clay-primary-text:  #b39bff;   /* di gelap, teks ungu harus LEBIH terang */
  --clay-primary-soft:  #2a2450;

  --clay-mint:  #2f9d85;  --clay-mint-hi:  #8adcc8;
  --clay-blue:  #4f7df7;  --clay-blue-hi:  #8fb0ff;
  --clay-blue-mid: #6f95ff;
  --clay-amber: #e39a3b;  --clay-amber-hi: #ffc266;
  --clay-rose:  #d84f6b;  --clay-rose-hi:  #ff8fa3;

  --clay-border: 1px solid rgba(216, 208, 255, .10);

  /* Bayangan clay di gelap: putihnya dikurangin banyak (garis kilau putih
     tebal di atas permukaan gelap bikin kartu keliatan "berkabut"), gelapnya
     dinaikin biar timbulnya tetap kerasa. */
  --clay-sh-card:   0 12px 26px rgba(0,0,0,.45), inset 0 2px 0 rgba(226,220,255,.12);
  --clay-sh-btn:    0 7px 14px rgba(0,0,0,.5), inset 0 2px 0 rgba(226,220,255,.12), inset 0 -3px 6px rgba(0,0,0,.35);
  --clay-sh-btn-primary: 0 10px 18px rgba(115,85,232,.5), inset 0 2px 0 rgba(255,255,255,.28), inset 0 -5px 9px rgba(0,0,0,.3);
  --clay-sh-inset:  inset 0 2px 6px rgba(0,0,0,.45);
  --clay-sh-chip:   inset 0 2px 0 rgba(226,220,255,.12);
  --clay-sh-icon:   0 6px 12px rgba(0,0,0,.45), inset 0 2px 0 rgba(226,220,255,.12);
  --clay-sh-pop:    0 18px 38px rgba(0,0,0,.6), inset 0 2px 0 rgba(226,220,255,.12);

  --clay-grad-primary: linear-gradient(180deg, var(--clay-primary-hi), var(--clay-primary));
  --clay-grad-mint:    linear-gradient(180deg, var(--clay-mint-hi), var(--clay-mint));
  --clay-grad-blue:    linear-gradient(180deg, var(--clay-blue-hi), var(--clay-blue));
  --clay-grad-amber:   linear-gradient(180deg, var(--clay-amber-hi), var(--clay-amber));
  --clay-grad-rose:    linear-gradient(180deg, var(--clay-rose-hi), var(--clay-rose));
  /* Cahaya latar di gelap dibikin jauh lebih redup — kalau nilainya disamain
     sama versi terang, hasilnya dua noda ungu terang yang nyilaukan. */
  --clay-grad-page:
    radial-gradient(800px 460px at 88% -6%, #241d47 0%, transparent 58%),
    radial-gradient(680px 420px at -6% 14%, #17203a 0%, transparent 55%),
    var(--clay-bg);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --clay-ink:        #eceafb;
    --clay-ink-soft:   #a8a2c8;
    --clay-ink-faint:  #7d769e;
    --clay-bg:         #16151f;
    --clay-surface:    #232132;
    --clay-well:       #1c1b2a;
    --clay-well-deep:  #15141f;

    --clay-primary:       #7355e8;
    --clay-primary-hi:    #9b7bff;
    --clay-primary-text:  #b39bff;
    --clay-primary-soft:  #2a2450;

    --clay-mint:  #2f9d85;  --clay-mint-hi:  #8adcc8;
    --clay-blue:  #4f7df7;  --clay-blue-hi:  #8fb0ff;
    --clay-blue-mid: #6f95ff;
    --clay-amber: #e39a3b;  --clay-amber-hi: #ffc266;
    --clay-rose:  #d84f6b;  --clay-rose-hi:  #ff8fa3;

    --clay-border: 1px solid rgba(216, 208, 255, .10);

    --clay-sh-card:   0 12px 26px rgba(0,0,0,.45), inset 0 2px 0 rgba(226,220,255,.12);
    --clay-sh-btn:    0 7px 14px rgba(0,0,0,.5), inset 0 2px 0 rgba(226,220,255,.12), inset 0 -3px 6px rgba(0,0,0,.35);
    --clay-sh-btn-primary: 0 10px 18px rgba(115,85,232,.5), inset 0 2px 0 rgba(255,255,255,.28), inset 0 -5px 9px rgba(0,0,0,.3);
    --clay-sh-inset:  inset 0 2px 6px rgba(0,0,0,.45);
    --clay-sh-chip:   inset 0 2px 0 rgba(226,220,255,.12);
    --clay-sh-icon:   0 6px 12px rgba(0,0,0,.45), inset 0 2px 0 rgba(226,220,255,.12);
    --clay-sh-pop:    0 18px 38px rgba(0,0,0,.6), inset 0 2px 0 rgba(226,220,255,.12);

    --clay-grad-primary: linear-gradient(180deg, var(--clay-primary-hi), var(--clay-primary));
    --clay-grad-mint:    linear-gradient(180deg, var(--clay-mint-hi), var(--clay-mint));
    --clay-grad-blue:    linear-gradient(180deg, var(--clay-blue-hi), var(--clay-blue));
    --clay-grad-amber:   linear-gradient(180deg, var(--clay-amber-hi), var(--clay-amber));
    --clay-grad-rose:    linear-gradient(180deg, var(--clay-rose-hi), var(--clay-rose));
    --clay-grad-page:
      radial-gradient(800px 460px at 88% -6%, #241d47 0%, transparent 58%),
      radial-gradient(680px 420px at -6% 14%, #17203a 0%, transparent 55%),
      var(--clay-bg);
  }
}

/* ── Component recipes (contoh pemakaian) ── */
.clay-card { background: var(--clay-surface); border: var(--clay-border); border-radius: var(--clay-r-card); box-shadow: var(--clay-sh-card); padding: 24px 26px; }
.clay-well { background: var(--clay-well); border-radius: var(--clay-r-well); box-shadow: var(--clay-sh-inset); padding: 13px 17px; }
.clay-btn { font: 900 14px var(--clay-font); color: var(--clay-ink); background: var(--clay-surface); border: var(--clay-border); border-radius: var(--clay-r-ctl); box-shadow: var(--clay-sh-btn); padding: 0 18px; height: 42px; cursor: pointer; }
.clay-btn:active { transform: var(--clay-press); }
.clay-btn-primary { font: 900 14px var(--clay-font); color: #fff; background: var(--clay-grad-primary); border: 1px solid rgba(255,255,255,.28); border-radius: var(--clay-r-ctl); box-shadow: var(--clay-sh-btn-primary); text-shadow: 0 1px 1px rgba(63,48,150,.4); padding: 0 20px; height: 42px; cursor: pointer; }
.clay-btn-primary:active { transform: var(--clay-press); }
.clay-input { font: 800 14px var(--clay-font); color: var(--clay-ink); background: var(--clay-well); border: none; border-radius: var(--clay-r-ctl); box-shadow: var(--clay-sh-inset); padding: 13px 16px; outline: none; }
.clay-input:focus { box-shadow: var(--clay-sh-inset), 0 0 0 3px rgba(155,123,255,.35); }
.clay-pill { font: 900 12px var(--clay-font); color: var(--clay-primary-text); background: var(--clay-well); border-radius: var(--clay-r-pill); box-shadow: var(--clay-sh-chip); padding: 4px 12px; }
.clay-pill-active { font: 900 12px var(--clay-font); color: #fff; background: var(--clay-grad-primary); border-radius: var(--clay-r-pill); box-shadow: 0 6px 12px rgba(115,85,232,.4), inset 0 2px 0 rgba(255,255,255,.4); padding: 4px 12px; }
.clay-icon-chip { width: 34px; height: 34px; display: grid; place-items: center; background: var(--clay-well); border-radius: var(--clay-r-icon); box-shadow: var(--clay-sh-icon); transform: rotate(-6deg); }
body.clay { font-family: var(--clay-font); color: var(--clay-ink); font-weight: 700; background: var(--clay-grad-page); min-height: 100vh; -webkit-font-smoothing: antialiased; }