/* ============================================================================ JANGAN edit di produk — sumber kebenaran: wtb-design-system/css/wtb-cinematic.css ============================================================================ WTB CINEMATIC SIGNATURE — KONTRAK TOKEN SEMANTIK PT Widigital Tri Buana · bahasa desain master ============================================================================ DUA REGISTER, SATU BRAND (Branded House): :root = TERANG "Porcelain" → widigitaltribuana.co.id (B2B elok) .dark = GELAP "Deep Space" → widigitaltribuana.com + produk (epik) Cara pakai: - Halaman gelap penuh: - Halaman terang: (default) - Plat gelap di halaman terang: gunakan token --deepspace-* + kelas .deep-field ATURAN komponen: selalu pakai class token SEMANTIK (bg-card, text-muted-foreground, rounded-[var(--radius-card)], bg-primary) — BUKAN warna hardcoded. @font-face: font lokal self-hosted disediakan di bawah (fonts/*.woff2, sejak v1.1.0) — alternatif @fontsource-variable. Konsumen boleh pakai salah satu; dua-duanya resolve ke family name yang sama dengan --ff-* di bawah. ============================================================================ */ /* ============================================================================ @font-face — FONT LOKAL SELF-HOSTED (v1.1.0, jalur diperbaiki 1.3.0) Berkas fisik: fonts/*.woff2 (commit di repo, tanpa @import fontsource). DUA ENTRI src, disengaja: /fonts/... (absolut) melayani konsumen ber-bundler yang menyalin fonts/ ke folder publiknya; ../fonts/... (relatif) melayani berkas HTML yang memuat CSS ini langsung dari disk (preview.html, deck, kartu OG). Browser mencoba berurutan dan melewati yang gagal, jadi kedua konteks terlayani. JANGAN hapus entri relatif: artefak lokal di repo lain memuat CSS ini apa adanya dan akan kehilangan tipografinya secara senyap. Family name PERSIS sama dengan nilai --ff-display/--ff-serif/--ff-body/--ff-mono di bawah, supaya token & font-face otomatis nyambung tanpa konfigurasi lain. ============================================================================ */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/hanken-grotesk-normal-400.woff2') format('woff2'), url('../fonts/hanken-grotesk-normal-400.woff2') format('woff2'); } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/hanken-grotesk-normal-500.woff2') format('woff2'), url('../fonts/hanken-grotesk-normal-500.woff2') format('woff2'); } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/hanken-grotesk-normal-600.woff2') format('woff2'), url('../fonts/hanken-grotesk-normal-600.woff2') format('woff2'); } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/hanken-grotesk-normal-700.woff2') format('woff2'), url('../fonts/hanken-grotesk-normal-700.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono Variable'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/jetbrains-mono-normal-400.woff2') format('woff2'), url('../fonts/jetbrains-mono-normal-400.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono Variable'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/jetbrains-mono-normal-500.woff2') format('woff2'), url('../fonts/jetbrains-mono-normal-500.woff2') format('woff2'); } @font-face { font-family: 'Newsreader Variable'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/newsreader-italic-400.woff2') format('woff2'), url('../fonts/newsreader-italic-400.woff2') format('woff2'); } @font-face { font-family: 'Newsreader Variable'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/newsreader-normal-400.woff2') format('woff2'), url('../fonts/newsreader-normal-400.woff2') format('woff2'); } @font-face { font-family: 'Schibsted Grotesk Variable'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/schibsted-grotesk-normal-400.woff2') format('woff2'), url('../fonts/schibsted-grotesk-normal-400.woff2') format('woff2'); } @font-face { font-family: 'Schibsted Grotesk Variable'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/schibsted-grotesk-normal-500.woff2') format('woff2'), url('../fonts/schibsted-grotesk-normal-500.woff2') format('woff2'); } @font-face { font-family: 'Schibsted Grotesk Variable'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/schibsted-grotesk-normal-600.woff2') format('woff2'), url('../fonts/schibsted-grotesk-normal-600.woff2') format('woff2'); } @font-face { font-family: 'Schibsted Grotesk Variable'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/schibsted-grotesk-normal-700.woff2') format('woff2'), url('../fonts/schibsted-grotesk-normal-700.woff2') format('woff2'); } @font-face { font-family: 'Schibsted Grotesk Variable'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/schibsted-grotesk-normal-800.woff2') format('woff2'), url('../fonts/schibsted-grotesk-normal-800.woff2') format('woff2'); } /* ============================================================================ :root — REGISTER TERANG "Porcelain" ============================================================================ */ :root { /* ── 1. SHADCN CONTRACT — nama variabel jangan diubah ── */ --background: #f4f2f7; /* porcelain dingin */ --foreground: #1a1626; /* indigo-ink */ --card: #ffffff; --card-foreground: #1a1626; --popover: #ffffff; --popover-foreground: #1a1626; --primary: #7b3fa0; /* violet solid — CTA terang */ --primary-foreground: #ffffff; --secondary: #ece8f2; --secondary-foreground: #3a3350; --muted: #f0edf5; --muted-foreground: #5b5470; --accent: #ede7f5; /* tint violet lembut */ --accent-foreground: #4a2f66; --destructive: #b93a2b; /* 5,10:1 vs porcelain (naik dari #c8402f 4,47 yang pas-pasan; putih di atasnya 5,67) */ --destructive-foreground: #ffffff; /* ramp tonal 100-900 (v1.1.0) — skala kecerahan bersama + hue tetap; 500 = --destructive di atas, exact. Rumus: DESIGN.md § Ramp tonal 100-900. */ --destructive-100: #ffedea; --destructive-200: #fcc1b6; --destructive-300: #f69382; --destructive-400: #e06b59; --destructive-500: #b93a2b; --destructive-600: #9e3022; --destructive-700: #772015; --destructive-800: #51110a; --destructive-900: #2f0502; /* ── STATUS SEMANTIK (aurora-adjacent; kontras WCAG AA terverifikasi) ── */ /* Tambahan v1.0.1 — 26 Agu 2026. Sebelumnya proyek memakai hex liar karena token ini belum ada. Pakai var(--success) dst, bukan hex langsung. */ --success: #1a6b45; /* emerald teal gelap — 5.84:1 vs porcelain */ --success-foreground: #ffffff; /* 6.50:1 vs --success */ /* ramp tonal 100-900 (v1.1.0) — 500 = --success di atas, exact */ --success-100: #ddfae8; --success-200: #add5bc; --success-300: #7eb193; --success-400: #508d6b; --success-500: #1a6b45; --success-600: #145637; --success-700: #0e4129; --success-800: #082e1b; --success-900: #041b0f; --warning: #7d5500; /* amber gelap — 5.96:1 vs porcelain */ --warning-foreground: #ffffff; /* 6.62:1 vs --warning */ /* ramp tonal 100-900 (v1.1.0) — 500 = --warning di atas, exact */ --warning-100: #fef0da; --warning-200: #dfc7a3; --warning-300: #be9f72; --warning-400: #9d7a42; --warning-500: #7d5500; --warning-600: #644301; --warning-700: #4c3201; --warning-800: #352201; --warning-900: #201301; --info: #2c4f8a; /* periwinkle-navy (aurora-adjacent) — 7.29:1 vs porcelain */ --info-foreground: #ffffff; /* 8.10:1 vs --info */ /* ramp tonal 100-900 (v1.1.0) — 500 = --info di atas, exact */ --info-100: #ebf2ff; --info-200: #b1c8ed; --info-300: #839ecc; --info-400: #5676ab; --info-500: #2c4f8a; --info-600: #234070; --info-700: #1a3157; --info-800: #12233f; --info-900: #0a1629; --border: rgba(123, 63, 160, 0.14); --input: rgba(26, 22, 38, 0.12); --ring: #7b3fa0; --chart-1: #7b3fa0; /* violet */ --chart-2: #6b5bc4; /* indigo */ --chart-3: #5f79b8; /* periwinkle-navy (kebaca di porcelain) */ --chart-4: #7b2fd6; /* magenta-violet */ --chart-5: #3f5489; /* navy */ --radius: 0.5rem; /* 8px — radius UI mikro shadcn */ --sidebar: #f0edf5; --sidebar-foreground: #1a1626; --sidebar-primary: #7b3fa0; --sidebar-primary-foreground:#ffffff; --sidebar-accent: #ede7f5; --sidebar-accent-foreground: #4a2f66; --sidebar-border: rgba(123, 63, 160, 0.14); --sidebar-ring: #7b3fa0; /* ── 2. EKSTENSI WTB — brand, CTA, aurora ── */ --brand: #7b3fa0; /* violet master (dari logo WTB) */ --brand-secondary: #5566a0; /* periwinkle-navy — kebaca di porcelain */ --brand-navy: #3f5489; /* ramp tonal 100-900 (v1.1.0) — 500 = --brand di atas, exact */ --brand-100: #f7eefe; --brand-200: #ddbcf5; --brand-300: #bb92d9; --brand-400: #9b69bd; --brand-500: #7b3fa0; --brand-600: #623180; --brand-700: #4a2462; --brand-800: #341745; --brand-900: #1f0c2b; --cta: #7b3fa0; --cta-foreground: #ffffff; --cta-hover: #6a3390; /* aurora signature — DNA logo, periwinkle→indigo→violet→magenta register-invariant: selalu dipakai di plat gelap (deep-field / deep-wash) */ --aurora-1: #8ea5d3; /* periwinkle */ --aurora-2: #6b5bc4; /* indigo */ --aurora-3: #7b3fa0; /* violet */ --aurora-4: #7b2fd6; /* magenta-violet tip */ --sig-gradient: linear-gradient(100deg, var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-4)); /* sub-aksen per produk (keluarga violet-indigo-kosmik) */ --accent-studio: #7b2fd6; --accent-pengacaraku: #6b5bc4; --accent-klinova: #8ea5d3; --accent-stp: #7b3fa0; --accent-tribuanacloud: #3f5489; --accent-tangkasai: #f5a623; /* amber, selaras --warning register gelap */ /* ── 3. DEEP SPACE — token plat gelap (untuk seksi dark di halaman terang) ── Nilai persis sama dengan override .dark di bawah. Pakai token ini di kelas .deep-field dan seksi inline deep-space. */ --deepspace: #0d0b1f; --deepspace-card: #221c34; --deepspace-secondary: #1c1729; --deepspace-foreground: #edeaf5; --deepspace-muted-foreground: #9b92b5; --deepspace-border: rgba(237, 234, 245, 0.13); --deepspace-brand: #bd92e3; /* sinkron .dark 1.1.3 (sempat tertinggal di #9b6fd0) */ --deepspace-success: #34c776; --deepspace-warning: #f5a623; --deepspace-cta: #7b2fd6; --deepspace-cta-hover: #9a5cf0; /* elevasi gelap = surface tint bertingkat + rim-light (bukan drop-shadow hitam) */ --shadow-deep-sm: inset 0 0 0 9999px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 8px rgba(0,0,0,0.5); --shadow-deep-md: inset 0 0 0 9999px rgba(255,255,255,0.085), inset 0 1px 0 rgba(255,255,255,0.16), 0 24px 60px -24px rgba(0,0,0,0.85); --shadow-deep-lg: inset 0 0 0 9999px rgba(255,255,255,0.14), inset 0 1px 0 rgba(255,255,255,0.22), 0 44px 96px -30px rgba(0,0,0,0.9); /* ── 4. TIPOGRAFI ── Konsumen load font via @fontsource-variable, bukan @import di sini. */ /* kanonik WTB (--ff-*) */ --ff-display: 'Schibsted Grotesk Variable', 'Schibsted Grotesk', 'Hanken Grotesk', system-ui, sans-serif; --ff-serif: 'Newsreader Variable', 'Newsreader', Georgia, 'Times New Roman', serif; --ff-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --ff-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* alias shadcn/Tailwind (--font-*) — tunjuk ke --ff-* */ --font-sans: var(--ff-body); --font-display: var(--ff-display); --font-serif: var(--ff-serif); --font-mono: var(--ff-mono); /* ── 5. SKALA FLUID ── */ --text-display: clamp(3rem, 5.5vw + 1rem, 5.5rem); --text-h1: clamp(2.25rem, 4vw + 0.5rem, 4rem); --text-h2: clamp(1.75rem, 3vw + 0.25rem, 3rem); --text-h3: clamp(1.25rem, 1.8vw, 2rem); --text-lg: 1.125rem; --text-base: 1rem; --text-sm: 0.875rem; --text-xs: 0.8125rem; /* 13px — min readable */ /* ── 6. SPACING (base 4px) ── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* ── 7. RADIUS ── */ --radius-sm: 2px; /* border tag/chip mikro */ --radius-md: 6px; --radius-lg: 8px; /* = --radius (shadcn base) */ --radius-xl: 8px; --radius-card: 18px; /* kartu mengambang besar (ala Tome) */ --radius-full: 9999px; --radius-pill: 9999px; /* ── 8. SHADOW — terang (drop-shadow indigo-ink) ── */ --shadow-sm: 0 1px 3px rgba(26,22,38,0.08); --shadow-md: 0 4px 16px rgba(26,22,38,0.10); --shadow-lg: 0 12px 40px rgba(26,22,38,0.14); /* ── 9. MOTION — easing signature master ── */ --duration-fast: 150ms; --duration-normal: 240ms; --duration-slow: 500ms; --dur-fast: 150ms; /* alias singkat */ --dur: 240ms; --dur-slow: 500ms; --ease-out: cubic-bezier(0.0, 0, 0.2, 1); --ease-silk: cubic-bezier(0.22, 1, 0.36, 1); /* hover / keluar */ --ease-snap: cubic-bezier(0.16, 1, 0.3, 1); /* enter / reveal */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-enter: var(--ease-snap); --ease-hover: var(--ease-silk); /* ── 10. ALIAS LEGACY — opsional, kompat komponen lama ── Komponen baru HARUS pakai token kanonik di atas, bukan alias ini. Alias di bawah tidak akan dihapus agar komponen lama tidak rusak. */ --ivory: var(--background); --ivory-deep: var(--secondary); --ivory-dark: #e2ddeb; --ink: var(--foreground); --ink-soft: var(--secondary-foreground); --ink-muted: var(--muted-foreground); --ink-faint: #8a82a0; --indigo-mid: var(--cta-hover); --indigo-pale: var(--aurora-2); --brass: var(--brand); /* aksen utama kini violet */ --brass-light: var(--aurora-1); /* aksen di plat gelap = periwinkle */ --hairline: var(--border); --hairline-warm: rgba(123, 63, 160, 0.22); --color-bg: var(--background); --color-bg-subtle: var(--secondary); --color-surface: var(--card); --color-ink: var(--foreground); --color-ink-muted: var(--muted-foreground); --color-ink-faint: var(--ink-faint); --color-accent: var(--brand); --color-accent-dark: var(--cta-hover); --color-accent-bg: rgba(123,63,160,0.08); --color-border: var(--border); --color-border-subtle: rgba(26,22,38,0.07); --color-success: var(--success); /* dulu #2ECC71 (rasio 1.89:1 = gagal AA) */ --color-error: var(--destructive);/* dulu #DC2626 */ --color-dark-bg: var(--deepspace); --color-dark-surface: var(--deepspace-card); /* ── 11. GLASS TOKENS — liquid glass register terang ── */ --glass-bg: rgba(255,255,255,0.72); --glass-border: rgba(123,63,160,0.16); --glass-blur: 12px; } /* ============================================================================ .dark — REGISTER GELAP "Deep Space" Pakai: untuk wajah gelap (.com / produk / AI) ============================================================================ */ .dark { /* ── shadcn contract — override register gelap ── */ --background: #0d0b1f; --foreground: #edeaf5; --card: #221c34; /* panel mengambang: beda luminance vs kanvas */ --card-foreground: #edeaf5; --popover: #16121e; --popover-foreground: #edeaf5; --primary: #7b2fd6; /* violet panas — energi Tome */ --primary-foreground: #ffffff; --secondary: #1c1729; --secondary-foreground: #d9d3e8; --muted: #17131f; --muted-foreground: #9b92b5; --accent: #241a33; --accent-foreground: #d6c4ea; --destructive: #e5654f; --destructive-foreground: #1c0b08; /* tinta merah-gelap — putih di atas #e5654f cuma 3,33:1, tinta 5,45:1 */ /* ramp tonal 100-900 (v1.1.0) — 500 = --destructive di atas, exact */ --destructive-100: #feeeea; --destructive-200: #feccc1; --destructive-300: #fda897; --destructive-400: #f48671; --destructive-500: #e5654f; --destructive-600: #b34b39; --destructive-700: #833225; --destructive-800: #571b12; --destructive-900: #2d0603; /* status semantik — override register gelap */ --success: #34c776; /* emerald cerah — 8.83:1 vs deep-space */ --success-foreground: #061a0e; /* 8.24:1 vs --success */ /* ramp tonal 100-900 (v1.1.0) — 500 = --success di atas, exact */ --success-100: #d3ffdf; --success-200: #aff2c3; --success-300: #8ce4a9; --success-400: #66d590; --success-500: #34c776; --success-600: #1c9857; --success-700: #196b3d; --success-800: #014221; --success-900: #011c0b; --warning: #f5a623; /* amber cerah — 9.55:1 vs deep-space */ --warning-foreground: #2a1500; /* 8.59:1 vs --warning */ /* ramp tonal 100-900 (v1.1.0) — 500 = --warning di atas, exact */ --warning-100: #ffefdc; --warning-200: #feddb5; --warning-300: #fdcb8a; --warning-400: #fbb85a; --warning-500: #f5a623; --warning-600: #bc7c04; --warning-700: #83560c; --warning-800: #4f3304; --warning-900: #211200; --info: #8ea5d3; /* periwinkle = aurora-1 — 7.81:1 vs deep-space */ --info-foreground: #0d1a2e; /* 7.04:1 vs --info */ /* ramp tonal 100-900 (v1.1.0) — 500 = --info di atas, exact */ --info-100: #ecf2fe; --info-200: #d1dff9; --info-300: #bacbed; --info-400: #a4b8e0; --info-500: #8ea5d3; --info-600: #6b7da3; --info-700: #4a5875; --info-800: #2b354a; --info-900: #0f1623; --border: rgba(237, 234, 245, 0.13); /* hairline netral putih-alpha */ --input: rgba(237, 234, 245, 0.18); --ring: #7b2fd6; --chart-1: #b678d6; --chart-2: #8b7ce0; --chart-3: #8ea5d3; --chart-4: #7b2fd6; --chart-5: #5a74b0; --sidebar: #0d0b1f; --sidebar-foreground: #edeaf5; --sidebar-primary: #7b2fd6; --sidebar-primary-foreground:#ffffff; --sidebar-accent: #241a33; --sidebar-accent-foreground: #d6c4ea; --sidebar-border: rgba(237, 234, 245, 0.09); --sidebar-ring: #7b2fd6; /* ── ekstensi WTB — override gelap ── */ --brand: #bd92e3; /* violet terang — AA termasuk kartu kaca (7,73 deep / 6,53 kartu / ±4,75 kaca; lift 1.1.3 menutup 4,47 SKALA PENUH) */ --brand-secondary: #8ea5d3; --brand-navy: #5a74b0; /* ramp tonal 100-900 (v1.1.0) — 500 = --brand di atas, exact */ --brand-100: #f5eeff; --brand-200: #e0cbfe; --brand-300: #c9abf2; --brand-400: #b28de1; --brand-500: #9b6fd0; --brand-600: #7854a3; --brand-700: #573b78; --brand-800: #382350; --brand-900: #1c0e2b; --cta: #7b2fd6; /* violet panas + glow */ --cta-foreground: #ffffff; --cta-hover: #9a5cf0; /* shadow gelap = surface tint bertingkat (Material/Apple-style) override --shadow-sm/md/lg sehingga komponen gelap otomatis dapat tint TANPA perlu kelas tambahan atau variabel berbeda */ --shadow-sm: inset 0 0 0 9999px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 8px rgba(0,0,0,0.5); --shadow-md: inset 0 0 0 9999px rgba(255,255,255,0.085), inset 0 1px 0 rgba(255,255,255,0.16), 0 24px 60px -24px rgba(0,0,0,0.85); --shadow-lg: inset 0 0 0 9999px rgba(255,255,255,0.14), inset 0 1px 0 rgba(255,255,255,0.22), 0 44px 96px -30px rgba(0,0,0,0.9); /* alias legacy — update ke register gelap */ --ivory: var(--background); --ivory-deep: var(--secondary); --ink: var(--foreground); --ink-soft: var(--secondary-foreground); --ink-muted: var(--muted-foreground); --hairline: var(--border); --color-bg: var(--background); --color-surface: var(--card); --color-ink: var(--foreground); --color-ink-muted: var(--muted-foreground); --color-border: var(--border); /* glass tokens — override gelap */ --glass-bg: rgba(20,16,35,0.78); --glass-border: rgba(255,255,255,0.16); --glass-blur: 14px; } /* ============================================================================ @theme inline — Tailwind v4: expose token ke kelas utility (bg-background, text-muted-foreground, bg-primary, bg-brand, bg-cta, font-display, rounded-card, dsb.) Abaikan blok ini jika tidak pakai Tailwind v4 — tidak ada efek di CSS biasa. ============================================================================ */ @theme inline { /* warna shadcn */ --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-info: var(--info); --color-info-foreground: var(--info-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); /* ekstensi WTB */ --color-brand: var(--brand); --color-brand-secondary: var(--brand-secondary); --color-brand-navy: var(--brand-navy); --color-cta: var(--cta); --color-cta-foreground: var(--cta-foreground); --color-aurora-1: var(--aurora-1); --color-aurora-2: var(--aurora-2); --color-aurora-3: var(--aurora-3); --color-aurora-4: var(--aurora-4); --color-accent-studio: var(--accent-studio); --color-accent-pengacaraku: var(--accent-pengacaraku); --color-accent-klinova: var(--accent-klinova); --color-accent-stp: var(--accent-stp); --color-accent-tribuanacloud: var(--accent-tribuanacloud); /* font */ --font-sans: var(--font-sans); --font-display: var(--font-display); --font-serif: var(--font-serif); --font-mono: var(--font-mono); /* radius */ --radius: var(--radius); --radius-card: var(--radius-card); --radius-pill: var(--radius-pill); }