/* * tokens.css — Design System Custom Properties * Sistem Akreditasi Pembiayaan, Direktorat Kelembagaan, Ditjen Dikti * * "Warm Academic" Design Language * Terinspirasi arsitektur kampus modern, jurnal akademik, perpustakaan. * * Sumber kebenaran tunggal untuk seluruh token desain. * Semua Razor view WAJIB memakai variabel ini; tidak boleh hardcode hex. */ /* ============================================================ @font-face — Inter (self-hosted) File diletakkan di wwwroot/fonts/inter/ ============================================================ */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter/Inter-VariableFont_slnt,wght.woff2") format("woff2"); } /* ============================================================ @font-face — JetBrains Mono (self-hosted) File diletakkan di wwwroot/fonts/jetbrains-mono/ ============================================================ */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("../fonts/jetbrains-mono/JetBrainsMono-VariableFont_wght.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: italic; font-weight: 100 800; font-display: swap; src: url("../fonts/jetbrains-mono/JetBrainsMono-Italic-VariableFont_wght.woff2") format("woff2"); } /* ============================================================ :root — Token Warna, Tipografi, Spasi ============================================================ */ :root { /* ---------------------------------------------------------- PALET WARNA — PRIMARY (Institutional Navy) Nuansa biru tua — tegas, otoritatif, berwibawa ---------------------------------------------------------- */ --color-primary-900: #0B2545; /* sidebar bg, headings */ --color-primary-800: #0F315A; /* sidebar gradient end */ --color-primary-700: #13315C; /* tombol primer, active states */ --color-primary-500: #1E4D8B; /* link, focus ring */ --color-primary-400: #2E68B2; /* hover tints */ --color-primary-100: #E6EEF8; /* background highlight */ --color-primary-50: #F2F6FC; /* very light tint */ /* ---------------------------------------------------------- PALET WARNA — SECONDARY (Gold / Amber) Aksen emas — melambangkan keluhuran pengabdian Ditjen Dikti ---------------------------------------------------------- */ --color-secondary-700: #B7791F; /* accent, CTA sekunder */ --color-secondary-500: #D69E2E; /* accent softer, active glow */ --color-secondary-100: #FEF9E7; /* accent background */ /* ---------------------------------------------------------- PALET WARNA — NEUTRAL (Slate / Cool Gray) Keluarga abu-abu dingin bersih — digital-first & professional ---------------------------------------------------------- */ --color-neutral-900: #1A1A1A; /* teks utama */ --color-neutral-700: #4A4A4A; /* teks sekunder */ --color-neutral-500: #8A8A8A; /* helper text, disabled */ --color-neutral-300: #D6D6D6; /* border */ --color-neutral-200: #EAEAEA; /* subtle divider */ --color-neutral-100: #F4F4F2; /* background section, tabel header */ --color-neutral-50: #FAFAF7; /* page background */ --color-white: #FFFFFF; /* ---------------------------------------------------------- PALET WARNA — SEMANTIC ---------------------------------------------------------- */ --color-success-700: #1F6B3A; --color-success-100: #E5F3EA; --color-warning-700: #8A5A00; --color-warning-100: #FFF3D6; --color-danger-700: #B42318; --color-danger-100: #FEE4E2; --color-info-700: #135286; --color-info-100: #E0F0FB; /* ---------------------------------------------------------- TIPOGRAFI — Font families ---------------------------------------------------------- */ --font-serif: "DM Serif Display", "Georgia", "Times New Roman", serif; --font-sans: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace; /* ---------------------------------------------------------- TIPOGRAFI — Skala (basis 16 px) ---------------------------------------------------------- */ /* display-lg: angka besar stat card */ --font-size-display-lg: 2.5rem; /* 40px */ --line-height-display-lg: 3rem; /* 48px */ --font-weight-display-lg: 400; /* serif berat normal sudah cukup */ /* display: judul halaman utama */ --font-size-display: 2rem; /* 32px */ --line-height-display: 2.5rem; /* 40px */ --font-weight-display: 400; --letter-spacing-display: -0.01em; /* heading-1: judul section */ --font-size-heading-1: 1.5rem; /* 24px */ --line-height-heading-1: 2rem; /* 32px */ --font-weight-heading-1: 600; /* heading-2: judul card */ --font-size-heading-2: 1.25rem; /* 20px */ --line-height-heading-2: 1.75rem; /* 28px */ --font-weight-heading-2: 600; /* heading-3: label group */ --font-size-heading-3: 1rem; /* 16px */ --line-height-heading-3: 1.5rem; /* 24px */ --font-weight-heading-3: 600; /* body: konten umum */ --font-size-body: 0.875rem; /* 14px */ --line-height-body: 1.375rem; /* 22px */ --font-weight-body: 400; /* body-sm: helper, caption */ --font-size-body-sm: 0.8125rem; /* 13px */ --line-height-body-sm: 1.25rem; /* 20px */ --font-weight-body-sm: 400; /* code: mono, ID, hash, token snippet */ --font-size-code: 0.8125rem; /* 13px */ --line-height-code: 1.25rem; /* 20px */ --font-weight-code: 400; /* ---------------------------------------------------------- SPASI — Skala 4 px base (4, 8, 12, 16, 24, 32, 48, 64) ---------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* ---------------------------------------------------------- LAYOUT ---------------------------------------------------------- */ --sidebar-width: 252px; --topbar-height: 56px; --content-max-width: 1280px; --page-padding: var(--space-8); /* 32px */ /* ---------------------------------------------------------- BORDER RADIUS ---------------------------------------------------------- */ --radius-sm: 6px; /* tombol, input, badge */ --radius-md: 10px; /* card — lebih warm */ --radius-lg: 14px; /* modal, large card */ --radius-full: 999px; /* avatar, status badge kapsul */ /* ---------------------------------------------------------- BAYANGAN — layered paper effect ---------------------------------------------------------- */ --shadow-card: 0 1px 3px rgba(26, 26, 26, 0.06), 0 1px 2px rgba(26, 26, 26, 0.04); --shadow-card-hover: 0 4px 12px rgba(26, 26, 26, 0.10), 0 2px 4px rgba(26, 26, 26, 0.06); --shadow-elevated: 0 8px 24px rgba(26, 26, 26, 0.12), 0 2px 6px rgba(26, 26, 26, 0.06); --shadow-modal: 0 12px 40px rgba(11, 37, 69, 0.18), 0 4px 12px rgba(26, 26, 26, 0.08); /* ---------------------------------------------------------- TRANSISI ---------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-medium: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ---------------------------------------------------------- FOCUS RING ---------------------------------------------------------- */ --focus-ring: 2px solid var(--color-primary-500); --focus-ring-offset: 2px; /* ---------------------------------------------------------- DOT-GRID BACKGROUND PATTERN ---------------------------------------------------------- */ --pattern-dot-color: rgba(26, 26, 26, 0.045); --pattern-dot-size: 1px; --pattern-dot-gap: 24px; /* ---------------------------------------------------------- ACCENT BORDER ---------------------------------------------------------- */ --border-accent: 4px solid var(--color-primary-500); --border-accent-alt: 4px solid var(--color-secondary-700); }