/* ============================================================================
   CUTINIKAH DESIGN SYSTEM — TOKEN LAYER
   File     : cutinikah-tokens.css
   Versi    : 1.0.0
   Update   : Juli 2026
   Owner    : Product & UI — CutiNikah

   SINGLE SOURCE OF TRUTH untuk semua keputusan visual CutiNikah.
   Ubah nilai di file ini → seluruh produk (web, studio, admin) ikut berubah.

   URUTAN INCLUDE (wajib):
     1. Google Fonts             (Playfair Display + DM Sans + Roboto Mono)
     2. cutinikah-tokens.css     <-- file ini, HARUS pertama
     3. cutinikah-components.css
     4. CSS spesifik halaman

   ----------------------------------------------------------------------------
   TIGA KONTEKS, SATU TOKEN LAYER
   ----------------------------------------------------------------------------
   CutiNikah punya tiga permukaan yang terasa berbeda tapi TIDAK boleh
   punya sistem warna yang berbeda:

     cutinikah-web     Landing page publik. Hangat, cream, Playfair besar.
     cutinikah-studio  Member area. Fungsional, putih, DM Sans, padat data.
     cutinikah-api     Backoffice admin. Sama seperti studio + tabel berat.

   Perbedaan konteks diatur lewat SURFACE dan TIPOGRAFI, bukan lewat palet
   terpisah. Rust dan Gold tetap warna yang sama di ketiga tempat.

   Untuk halaman undangan itu sendiri (invitation renderer), token di sini
   HANYA jadi fallback. Setiap template mengoverride Tier-1 token miliknya
   sendiri lewat scope .tpl-<slug> — lihat bagian 15.

   ----------------------------------------------------------------------------
   BRAND LOCK — jangan diubah tanpa persetujuan
   ----------------------------------------------------------------------------
     Rust   #B85C38   warna utama, tombol, topbar, link
     Gold   #C9963E   aksen, ornamen, garis pemisah, highlight
     Cream  #FAF6F0   background hangat
     Heading  Playfair Display        Body  DM Sans        Angka  Roboto Mono

   ----------------------------------------------------------------------------
   CATATAN KONTRAS
   ----------------------------------------------------------------------------
   Semua rasio di bawah dihitung dengan rumus WCAG 2.1 relative luminance,
   bukan diperkirakan. Setiap token teks diverifikasi di TIGA surface:
   --surface-card (#FFFFFF), --surface-page (#F5EFE7), --surface-sunken (#F2EBE2).

   Gold #C9963E hanya 2.65:1 di atas putih → GAGAL untuk teks apa pun.
   Gold adalah warna ORNAMEN. Untuk teks emas gunakan --brand-gold-deep.
============================================================================ */

:root {

  /* ==========================================================================
     1. BRAND
     Identitas CutiNikah. Topbar, link, nav aktif, tombol primary, focus ring.
     JANGAN gunakan untuk menyatakan status data — itu domain semantic color.
     ========================================================================== */

  --brand-primary:        #B85C38;  /* Rust — white on it = 4.54:1 AA */
  --brand-primary-dark:   #9A4A2A;  /* hover + teks di atas terang = 6.20:1 AA */
  --brand-primary-deep:   #7A3A21;  /* active/pressed, footer gelap */
  --brand-primary-light:  #F7E7E0;  /* bg nav aktif, badge — rust-dark di atasnya 5.16:1 AA */
  --brand-primary-subtle: #FBF1ED;  /* bg hover sangat halus — rust-dark 5.58:1 AA */

  --brand-gold:           #C9963E;  /* ORNAMEN SAJA — 2.65:1, bukan untuk teks */
  --brand-gold-deep:      #8A5E18;  /* teks emas — 5.68:1 AA di putih, 4.98:1 di page */
  --brand-gold-light:     #FAF0DC;  /* bg badge premium — gold-deep 5.02:1 AA */
  --brand-gold-subtle:    #FDF8EE;  /* bg hover premium — gold-deep 5.37:1 AA */

  --brand-cream:          #FAF6F0;  /* cream identitas — dipakai sebagai surface hangat */


  /* ==========================================================================
     2. ACCENT PALETTE
     Khusus untuk DATA: chart, stat card value, label kategoris, chip template.

     ATURAN PENTING:
     Warna accent hanya untuk ANGKA BESAR (>=24px) dan GRAFIK.

     Rasio di bawah ditulis sebagai card / page / sunken. Perhatikan:
     beberapa accent lolos AA di atas card putih tapi JATUH di bawah 4.5:1
     begitu dipakai di atas --surface-page atau --surface-sunken. Karena
     accent hanya untuk teks besar (butuh 3:1), semuanya tetap aman —
     tapi JANGAN memakainya untuk teks normal hanya karena "di putih lolos".

     Aman di KETIGA surface untuk teks normal : plum, indigo, gold
     Hanya aman di atas card putih             : blue, terracotta, olive
     ========================================================================== */

  --accent-blue:            #2563EB;  /* 5.17 / 4.52 / 4.37 — teks normal hanya di card */
  --accent-blue-light:      #DBEAFE;
  --accent-blue-subtle:     #EFF6FF;

  --accent-plum:            #A2306B;  /* 6.62 / 5.80 / 5.60 — aman di semua surface */
  --accent-plum-light:      #FBE8F1;
  --accent-plum-subtle:     #FDF4F8;

  --accent-indigo:          #6D28D9;  /* 7.10 / 6.22 / 6.01 — aman di semua surface */
  --accent-indigo-light:    #EDE9FE;
  --accent-indigo-subtle:   #F5F3FF;

  --accent-terracotta:      #C2410C;  /* 5.18 / 4.53 / 4.38 — mirip brand: pakai hemat */
  --accent-terracotta-light:#FFE8DC;
  --accent-terracotta-subtle:#FFF5EF;

  --accent-olive:           #4D7C0F;  /* 4.99 / 4.37 / 4.22 — teks normal hanya di card */
  --accent-olive-light:     #E7F3D6;
  --accent-olive-subtle:    #F4FAEC;

  --accent-gold:            #8A5E18;  /* 5.68 / 4.98 / 4.81 — versi teks dari brand gold */
  --accent-gold-light:      #FAF0DC;
  --accent-gold-subtle:     #FDF8EE;

  --text-on-accent:         #FFFFFF;  /* teks di atas accent solid */


  /* ==========================================================================
     3. SEMANTIC / STATUS
     Setiap warna membawa makna tetap. Konsistensi ini yang dipelajari user.

       success -> terkirim, terbit, lunas, terverifikasi, RSVP hadir
       warning -> menunggu bayar, draft, mendekati kedaluwarsa, kuota menipis
       danger  -> gagal bayar, expired, dinonaktifkan, hapus permanen
       info    -> informasi netral, tips, panduan onboarding

     Trio setiap status:
       --color-X       = solid  (tombol solid, dot indicator, border-left)
       --color-X-bg    = tinted (background badge & alert)
       --color-X-text  = teks   (teks di atas -bg, semua AAA >=6:1)

     CATATAN: danger memakai merah bata #B91C1C, bukan merah terang, supaya
     tidak bertabrakan secara visual dengan rust brand.
     ========================================================================== */

  --color-success:      #15803D;
  --color-success-bg:   #DCFCE7;
  --color-success-text: #14532D;  /* on -bg = 8.30:1 AAA */

  --color-warning:      #B45309;
  --color-warning-bg:   #FEF3C7;
  --color-warning-text: #78350F;  /* on -bg = 8.15:1 AAA */

  --color-danger:       #B91C1C;
  --color-danger-bg:    #FDE7E3;
  --color-danger-text:  #991B1B;  /* on -bg = 7.01:1 AAA */

  --color-info:         #1D4ED8;
  --color-info-bg:      #DBEAFE;
  --color-info-text:    #1E40AF;  /* on -bg = 7.15:1 AAA */


  /* ==========================================================================
     4. NEUTRAL SCALE (primitif) — netral HANGAT
     Token PRIMITIF — jangan dipakai langsung di komponen.
     Gunakan token semantik di bagian 5 & 6. Ini hanya bahan bakunya.

     Netral CutiNikah bukan abu-abu biru (slate). Semuanya digeser hangat
     supaya duduk berdampingan dengan cream tanpa terlihat "dingin".
     ========================================================================== */

  --sand-50:  #FDFBF8;
  --sand-100: #FAF6F0;
  --sand-150: #F5EFE7;
  --sand-200: #F2EBE2;
  --sand-250: #EDE4D8;
  --sand-300: #E3D7C7;
  --sand-350: #D6C7B4;
  --sand-400: #C2B09A;
  --sand-450: #A79482;
  --sand-500: #8E7D6B;
  --sand-550: #7A6E64;
  --sand-600: #6B6058;
  --sand-700: #5F5347;
  --sand-800: #4A423C;
  --sand-900: #2E2A26;


  /* ==========================================================================
     5. SURFACE
     Background berdasarkan PERAN, bukan warna.

     --surface-page berbeda per konteks:
       studio & admin  -> #F5EFE7 (sand-150), card putih terpisah jelas
       web publik      -> pakai --surface-warm untuk section bernuansa cream
     ========================================================================== */

  --surface-page:     #F5EFE7;  /* background aplikasi */
  --surface-card:     #FFFFFF;  /* card, panel, modal, sidebar, dropdown */
  --surface-sunken:   #F2EBE2;  /* area "tenggelam": card-footer, table header */
  --surface-warm:     #FAF6F0;  /* section hangat di landing page */
  --surface-topbar:   #B85C38;  /* topbar utama */
  --surface-overlay:  rgba(46, 42, 38, 0.55);  /* backdrop modal — warm, bukan biru */
  --surface-inverse:  #2E2A26;  /* toast, tooltip, footer gelap */


  /* ==========================================================================
     6. TEXT
     Semua token teks di bawah ini LOLOS WCAG AA (>=4.5:1) di KETIGA surface:
     --surface-card, --surface-page, --surface-sunken.
     ========================================================================== */

  --text-primary:     #2E2A26;  /* 14.23:1 AAA — heading, nilai utama, label penting */
  --text-secondary:   #4A423C;  /*  9.83:1 AAA — body, deskripsi, isi tabel */
  --text-muted:       #6B6058;  /*  5.35:1 AA  — caption, hint, placeholder, metadata
                                   Diverifikasi di KETIGA surface:
                                     di --surface-card   #FFFFFF : 6.11:1 AA
                                     di --surface-page   #F5EFE7 : 5.35:1 AA
                                     di --surface-sunken #F2EBE2 : 5.16:1 AA
                                   Catatan: #8E7D6B (sand-500) terlihat cantik tapi
                                   hanya 3.47:1 di atas --surface-page = GAGAL AA.
                                   Token teks harus lolos di semua surface. */
  --text-on-brand:    #FFFFFF;  /*  4.54:1 AA  — teks di atas --surface-topbar */
  --text-on-inverse:  #F5EFE7;  /* 12.46:1 AAA — teks di atas --surface-inverse */
  --text-link:        #9A4A2A;  /*  6.20:1 AA  — link di atas surface terang */
  --text-link-hover:  #7A3A21;


  /* ==========================================================================
     7. BORDER
     --border-input WAJIB untuk semua form control (WCAG 1.4.11 butuh >=3:1).
     ========================================================================== */

  --border-subtle:  #F2EBE2;  /* divider antar baris tabel */
  --border-default: #E3D7C7;  /* border card, panel, divider utama */
  --border-strong:  #C2B09A;  /* border hover, elemen yang ditekankan */
  --border-input:   #8E7D6B;  /* 3.47:1 di --surface-page — WAJIB utk input, select,
                                 textarea, checkbox, radio, toggle track */
  --border-focus:   #B85C38;  /* border saat focus */
  --border-gold:    #C9963E;  /* garis ornamen — dekoratif, bukan pembawa makna */


  /* ==========================================================================
     8. TYPOGRAPHY

     TIGA FONT, TIGA TUGAS — tidak boleh saling tukar:

       Playfair Display  Serif. Nama pasangan, judul hero, judul section
                         undangan. HANYA >=20px. Di bawah itu Playfair
                         kehilangan detail serif dan jadi sulit dibaca.
       DM Sans           Semua UI: label, body, tombol, tabel, form.
       Roboto Mono       Angka yang harus sejajar per kolom: nominal Rupiah,
                         kode voucher, ID transaksi, tanggal di tabel.
                         Dipilih karena angka 0 polos (tanpa garis miring)
                         sehingga kode voucher tidak salah baca.
     ========================================================================== */

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'Roboto Mono', 'SF Mono', Consolas, 'Courier New', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;   /* hero landing page — Playfair */
  --text-6xl:  64px;   /* nama pasangan di undangan — Playfair */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;  /* hanya untuk Playfair display */

  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   1.9;   /* body undangan — teks doa/sambutan */

  --tracking-tight:  -0.3px;
  --tracking-display:-1px;   /* Playfair ukuran besar */
  --tracking-wide:   0.06em; /* label uppercase kecil */
  --tracking-widest: 0.18em; /* eyebrow undangan: "THE WEDDING OF" */


  /* ==========================================================================
     9. SPACING — skala kelipatan 4px
     ========================================================================== */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;  /* jarak antar section landing page */
  --space-24: 96px;  /* jarak antar section undangan */


  /* ==========================================================================
     10. BORDER RADIUS
     ========================================================================== */

  --radius-sm:   4px;   /* tag kecil */
  --radius-md:   6px;   /* button, input, dropdown */
  --radius-lg:   8px;   /* card (default) */
  --radius-xl:   12px;  /* modal, panel besar */
  --radius-2xl:  16px;  /* hero card, template thumbnail */
  --radius-arch: 999px 999px 0 0;  /* bingkai foto melengkung (arch) — khas undangan */
  --radius-full: 9999px;/* badge pill, avatar, toggle */


  /* ==========================================================================
     11. SHADOW
     CutiNikah = flat-first di area aplikasi. Card default TIDAK pakai shadow,
     cukup border. Shadow hanya untuk elemen melayang: dropdown, modal, toast,
     dan kartu template yang sedang di-hover.

     Semua shadow memakai basis warna hangat (46,42,38), bukan hitam netral —
     bayangan abu-abu biru terlihat "kotor" di atas cream.
     ========================================================================== */

  --shadow-none:  none;
  --shadow-sm:    0 1px 2px rgba(46, 42, 38, 0.08);
  --shadow-md:    0 2px 4px rgba(46, 42, 38, 0.10), 0 1px 2px rgba(46, 42, 38, 0.06);
  --shadow-lg:    0 8px 24px rgba(46, 42, 38, 0.12), 0 2px 6px rgba(46, 42, 38, 0.08);
  --shadow-xl:    0 16px 48px rgba(46, 42, 38, 0.16), 0 4px 12px rgba(46, 42, 38, 0.08);
  --shadow-focus: 0 0 0 3px rgba(184, 92, 56, 0.35);
  --shadow-focus-danger: 0 0 0 3px rgba(185, 28, 28, 0.30);


  /* ==========================================================================
     12. LAYOUT
     ========================================================================== */

  --sidebar-width:      212px;  /* studio & admin — label Indonesia lebih panjang
                                   dari label Inggris, 196px terlalu sempit */
  --topbar-height:      52px;
  --content-padding:    24px;
  --card-padding:       20px;
  --gap-card:           16px;
  --content-max-width:  1400px;  /* aplikasi */
  --prose-max-width:    680px;   /* artikel & body panjang */
  --invite-max-width:   480px;   /* kanvas undangan — dibaca di HP, selalu 1 kolom */


  /* ==========================================================================
     13. MOTION
     Hanya animate: opacity, transform. Jangan animate width/height/padding.
     ========================================================================== */

  --transition-fast: 100ms ease;  /* hover warna */
  --transition-base: 150ms ease;  /* toggle, tab, dropdown */
  --transition-slow: 250ms ease;  /* modal, drawer, toast */
  --transition-reveal: 600ms cubic-bezier(.22,.61,.36,1);  /* scroll reveal undangan */


  /* ==========================================================================
     14. Z-INDEX
     ========================================================================== */

  --z-base:       0;
  --z-ornament:   10;   /* ornamen SVG di belakang konten undangan */
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-sidebar:    300;
  --z-topbar:     400;
  --z-modal:      500;
  --z-toast:      600;
  --z-cover:      700;  /* cover undangan "Buka Undangan" menutup seluruh layar */


  /* ==========================================================================
     15. INVITATION TIER-1 TOKENS
     Kontrak antara design system dan template renderer.

     Model variasi tiga tingkat:
       Tier 1  Token CSS       -> variasi PER UNDANGAN (dipilih user di studio)
       Tier 2  Ornamen/nuansa  -> identitas PER TEMPLATE (SVG, tekstur, motif)
       Tier 3  Layout/struktur -> komponen wrapper terpisah per template

     Nilai di bawah adalah FALLBACK. Setiap template wajib mengoverride
     seluruh blok ini di dalam scope-nya sendiri:

       .tpl-serene-dusk { --inv-bg: #1B1F2A; --inv-ink: #F3EFE9; ... }

     Nama token invitation SELALU diawali --inv-. Jangan pernah memakai token
     aplikasi (--brand-primary, --surface-card) di dalam renderer undangan —
     undangan harus bisa berwarna apa saja tanpa menyentuh brand CutiNikah.
     ========================================================================== */

  --inv-bg:          #FAF6F0;  /* latar kanvas undangan */
  --inv-bg-alt:      #F2EBE2;  /* section selang-seling */
  --inv-ink:         #2E2A26;  /* teks utama */
  --inv-ink-soft:    #6B6058;  /* teks sekunder, caption */
  --inv-accent:      #B85C38;  /* aksen: garis, ikon, tombol */
  --inv-accent-soft: #C9963E;  /* aksen kedua: ornamen, bintang, dekorasi */
  --inv-line:        #E3D7C7;  /* garis pemisah */
  --inv-font-display: 'Playfair Display', Georgia, serif;
  --inv-font-body:    'DM Sans', sans-serif;
  --inv-radius:      8px;
  --inv-section-gap: 96px;
}


/* ============================================================================
   BASE RESET & DEFAULT
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Playfair hanya untuk display. Di bawah 20px, kembalikan ke DM Sans. */
.display, h1.display, .h-display {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
}

/* Angka mono selalu sejajar per kolom (tabular).
   Penting untuk nominal Rupiah, kode voucher, dan tanggal di dalam tabel. */
code, kbd, samp, pre,
.mono,
[class*="-mono"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Utility: paksa angka sejajar walau pakai font sans (mis. kolom nominal) */
.tabular { font-variant-numeric: tabular-nums; }

/* Screen-reader only — untuk label aksesibilitas yang tidak tampil */
.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.u-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hormati preferensi pengguna yang sensitif terhadap gerakan.
   Penting untuk undangan: animasi reveal per section harus mati total. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}