/* ==========================================================================
   GDIPS UI - Design Tokens
   --------------------------------------------------------------------------
   Single source of truth for the GDIPS visual language.

   Identity: Geometry Dash × Indonesian community × Open source.
   - Warm dark neutral surfaces (sogan/night), never blue-gray "cyber".
   - One primary accent (GDIPS red) + one supporting accent (_sig gold).
   - A restrained kawung-inspired geometry motif (see --kawung-svg).
   Override tokens here; components only consume tokens.
   ========================================================================== */

:root {
	color-scheme: dark;

	/* ---- Surfaces (warm dark stack) ---- */
	--bg-0: #100f13;
	/* page background            */
	--bg-1: #16151a;
	/* sidebar / raised bands     */
	--bg-2: #1d1b22;
	/* cards, panels              */
	--bg-3: #262331;
	/* hover / nested surfaces    */
	--bg-4: #322e3d;
	/* pressed / strongest fill   */
	--ink-line: #2b2833;
	/* hairline borders           */
	--ink-line-strong: #3a3645;

	/* ---- Text ---- */
	--tx-1: #f4f3f6;
	/* primary text               */
	--tx-2: #a9a5b4;
	/* secondary text             */
	--tx-3: #787383;
	/* muted / metadata           */
	--tx-inv: #17151c;
	/* text on accent fills       */

	/* ---- Brand accents ----
	   merah: GDIPS red, primary actions & identity.
	   kuning: signature gold - stars, featured, sparing use.  */
	--merah: #e5484d;
	--merah-strong: #f2555a;
	--merah-deep: #b23539;
	--merah-soft: rgba(229, 72, 77, 0.14);
	--kuning: #eab04d;
	--kuning-soft: rgba(234, 176, 77, 0.14);

	/* ---- Semantic states ---- */
	--ok: #4cc38a;
	--ok-soft: rgba(76, 195, 138, 0.14);
	--warn: #eab04d;
	--warn-soft: rgba(234, 176, 77, 0.14);
	--danger: #e5484d;
	--danger-soft: rgba(229, 72, 77, 0.14);
	--info: #6cb2f7;
	--info-soft: rgba(108, 178, 247, 0.14);

	/* ---- GD difficulty language ---- */
	--diff-easy: #58c47a;
	--diff-normal: #58a6e8;
	--diff-hard: #e8b04d;
	--diff-harder: #e8734d;
	--diff-insane: #d959b8;
	--diff-demon: #e5484d;
	--diff-auto: #6cb2f7;

	/* ---- Typography ---- */
	--font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-display: "Chakra Petch", "Inter", system-ui, sans-serif;
	--fs-xs: 0.75rem;
	/* 12px compact metadata  */
	--fs-sm: 0.8438rem;
	/* 13.5px                 */
	--fs-md: 0.9375rem;
	/* 15px body              */
	--fs-lg: 1.0625rem;
	/* 17px emphasized body   */
	--fs-xl: 1.375rem;
	/* 22px section titles    */
	--fs-2xl: 1.75rem;
	/* 28px page titles       */
	--fs-hero: clamp(1.9rem, 1.2rem + 2.4vw, 2.6rem);
	--lh-tight: 1.2;
	--lh-body: 1.55;

	/* ---- Shape ---- */
	--r-sm: 6px;
	--r-md: 9px;
	--r-lg: 13px;
	--r-full: 999px;

	/* ---- Spacing (4px scale) ---- */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-8: 32px;
	--sp-10: 40px;
	--sp-12: 48px;
	--sp-16: 64px;

	/* ---- Elevation (restrained, no glow) ---- */
	--sh-1: 0 1px 2px rgba(0, 0, 0, 0.35);
	--sh-2: 0 6px 20px -6px rgba(0, 0, 0, 0.5);
	--sh-3: 0 16px 44px -12px rgba(0, 0, 0, 0.6);

	/* ---- Motion ---- */
	--tr-fast: 130ms cubic-bezier(0.3, 0.7, 0.4, 1);
	--tr-med: 220ms cubic-bezier(0.3, 0.7, 0.4, 1);

	/* ---- Layout ---- */
	--sidebar-w: 244px;
	--topbar-h: 58px;
	--content-max: 1220px;

	/* ---- Kawung motif (batik-inspired geometry, used at low opacity) ----
	   Four-petal kawung rosette drawn with strokes only; recolorable via
	   currentColor. Use with .gd-kawung utility classes. */
	--kawung-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.1'%3E%3Cpath d='M28 6c5 6 5 16 0 22-5-6-5-16 0-22Z'/%3E%3Cpath d='M28 50c-5-6-5-16 0-22 5 6 5 16 0 22Z'/%3E%3Cpath d='M6 28c6-5 16-5 22 0-6 5-16 5-22 0Z'/%3E%3Cpath d='M50 28c-6 5-16 5-22 0 6-5 16-5 22 0Z'/%3E%3Ccircle cx='28' cy='28' r='3.2'/%3E%3C/g%3E%3C/svg%3E");
	--kawung-size: 56px;

	/* ---- Legacy compatibility aliases (old cvolton palette) ---- */
	--c-link: #7db4e8;
}

html[data-theme="light"] {
	color-scheme: light;

	--bg-0: #f7f6f3;
	--bg-1: #ffffff;
	--bg-2: #f0efec;
	--bg-3: #e7e5e0;
	--bg-4: #d9d6cf;

	--ink-line: #d8d5ce;
	--ink-line-strong: #c5c1b8;

	--tx-1: #1b1a1d;
	--tx-2: #5f5b63;
	--tx-3: #817b84;
	--tx-inv: #ffffff;

	/* accent GDIPS tetap */
	--merah: #d83b42;
	--merah-strong: #c92f36;
	--merah-deep: #a8262c;
	--merah-soft: rgba(216, 59, 66, 0.12);

	--kuning: #b98220;
	--kuning-soft: rgba(185, 130, 32, 0.12);
}

html[data-theme="light"] {
	color-scheme: light;

	/* ---- Warm ivory surfaces ---- */
	--bg-0: #eee7d8;
	/* main page */
	--bg-1: #e4dac8;
	/* sidebar / header */
	--bg-2: #f2eadc;
	/* cards */
	--bg-3: #e7dcc9;
	/* hover / nested */
	--bg-4: #d8cbb5;
	/* pressed */

	/* ---- Warm borders ---- */
	--ink-line: #cfc1a9;
	--ink-line-strong: #b9a98e;

	/* ---- Text ---- */
	--tx-1: #29241f;
	--tx-2: #665c4f;
	--tx-3: #8a7d6a;
	--tx-inv: #fffaf0;

	/* ---- GDIPS red ---- */
	--merah: #cf3e43;
	--merah-strong: #bd3339;
	--merah-deep: #a52c31;
	--merah-soft: rgba(207, 62, 67, 0.12);

	/* ---- Batik / signature gold ---- */
	--kuning: #ad7d29;
	--kuning-soft: rgba(173, 125, 41, 0.14);

	/* ---- Semantic ---- */
	--ok: #3d8a63;
	--ok-soft: rgba(61, 138, 99, 0.13);
	--warn: #ad7d29;
	--warn-soft: rgba(173, 125, 41, 0.14);
	--danger: #cf3e43;
	--danger-soft: rgba(207, 62, 67, 0.12);
	--info: #4d7fa8;
	--info-soft: rgba(77, 127, 168, 0.12);

	/* ---- Golden kawung ---- */
	--kawung-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23b78a38' stroke-width='1.1'%3E%3Cpath d='M28 6c5 6 5 16 0 22-5-6-5-16-5-22Z'/%3E%3Cpath d='M28 50c-5-6-5-16 0-22 5 6 5 16 5 22Z'/%3E%3Cpath d='M6 28c6-5 16-5 22 0-6 5-16 5-22 5Z'/%3E%3Cpath d='M50 28c-6 5-16-5-22 0 6-5 16-5 22 0Z'/%3E%3Ccircle cx='28' cy='28' r='3.2'/%3E%3C/g%3E%3C/svg%3E");

	/* Slightly softer shadows for light mode */
	--sh-1: 0 1px 2px rgba(73, 57, 35, 0.10);
	--sh-2: 0 6px 20px -6px rgba(73, 57, 35, 0.14);
	--sh-3: 0 16px 44px -12px rgba(73, 57, 35, 0.18);

	--c-link: #8a6424;
}

/* ==========================================================================
   GDIPS UI — Light Theme
   Warm ivory / sogan-inspired light mode
   ========================================================================== */

html[data-theme="light"] {
	color-scheme: light;

	/* ----------------------------------------------------------------------
	   Surfaces — warm ivory, never pure white
	   ---------------------------------------------------------------------- */
	--bg-0: #f5f2ea;
	/* main page */
	--bg-1: #ebe6da;
	/* sidebar / raised regions */
	--bg-2: #faf8f3;
	/* cards / panels */
	--bg-3: #e7e1d5;
	/* hover / nested surfaces */
	--bg-4: #d8d0c1;
	/* pressed / strongest fill */

	/* ----------------------------------------------------------------------
	   Borders / dividers
	   ---------------------------------------------------------------------- */
	--ink-line: #d8d1c4;
	--ink-line-strong: #c6bdae;

	/* ----------------------------------------------------------------------
	   Typography
	   ---------------------------------------------------------------------- */
	--tx-1: #262421;
	--tx-2: #625d55;
	--tx-3: #8a8378;
	--tx-inv: #fffaf0;

	/* ----------------------------------------------------------------------
	   GDIPS red
	   ---------------------------------------------------------------------- */
	--merah: #d83f45;
	--merah-strong: #c9343a;
	--merah-deep: #a52c31;
	--merah-soft: rgba(216, 63, 69, .10);

	/* ----------------------------------------------------------------------
	   Batik / signature gold
	   ---------------------------------------------------------------------- */
	--kuning: #a98232;
	--kuning-soft: rgba(169, 130, 50, .10);

	/* ----------------------------------------------------------------------
	   Semantic colors
	   ---------------------------------------------------------------------- */
	--ok: #3d8a63;
	--ok-soft: rgba(61, 138, 99, 0.13);

	--warn: #ad7d29;
	--warn-soft: rgba(173, 125, 41, 0.14);

	--danger: #cf3e43;
	--danger-soft: rgba(207, 62, 67, 0.12);

	--info: #4d7fa8;
	--info-soft: rgba(77, 127, 168, 0.12);

	/* ----------------------------------------------------------------------
	   Geometry Dash difficulty colors
	   ---------------------------------------------------------------------- */
	--diff-easy: #398452;
	--diff-normal: #3979ad;
	--diff-hard: #a67a24;
	--diff-harder: #b25a35;
	--diff-insane: #a6478d;
	--diff-demon: #c83a40;
	--diff-auto: #4d7fa8;

	/* ----------------------------------------------------------------------
	   Elevation — warmer, softer shadows
	   ---------------------------------------------------------------------- */
	--sh-1: 0 1px 2px rgba(73, 57, 35, 0.10);
	--sh-2: 0 6px 20px -6px rgba(73, 57, 35, 0.14);
	--sh-3: 0 16px 44px -12px rgba(73, 57, 35, 0.18);

	/* ----------------------------------------------------------------------
	   Links
	   ---------------------------------------------------------------------- */
	--c-link: #8a6424;

	/* ----------------------------------------------------------------------
	   Kawung — warm antique gold
	   ---------------------------------------------------------------------- */
	--kawung-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23b78a38' stroke-width='1.1'%3E%3Cpath d='M28 6c5 6 5 16 0 22-5-6-5-16 0-22Z'/%3E%3Cpath d='M28 50c-5-6-5-16 0-22 5 6 5 16 0 22Z'/%3E%3Cpath d='M6 28c6-5 16-5 22 0-6 5-16 5-22 0Z'/%3E%3Cpath d='M50 28c-6-5-16-5-22 0 6 5 16 5 22 0Z'/%3E%3Ccircle cx='28' cy='28' r='3.2'/%3E%3C/g%3E%3C/svg%3E");

	--kawung-size: 56px;
}

/* ==========================================================================
   Light theme — batik treatment
   ========================================================================== */

html[data-theme="light"] .gd-brand::after {
	opacity: 0.09;
}

html[data-theme="light"] .gd-kawung-band {
	background-color: #faf8f3;
	background-image: var(--kawung-svg);
	background-size: 72px 72px;
	opacity: 1;
}

/* ==========================================================================
   Light theme — common UI surfaces
   ========================================================================== */

html[data-theme="light"] .gd-topbar {
	background: rgba(228, 218, 200, 0.92);
	backdrop-filter: blur(10px);
}

html[data-theme="light"] .gd-sidebar {
	background: var(--bg-1);
}

html[data-theme="light"] .gd-sidebar-foot {
	background: var(--bg-1);
}

html[data-theme="light"] .gd-card,
html[data-theme="light"] .gd-panel {
	background: var(--bg-2);
	border-color: var(--ink-line);
}

html[data-theme="light"] .gd-userchip {
	background: var(--bg-2);
}

html[data-theme="light"] .gd-userchip:hover,
html[data-theme="light"] .gd-nav-link:hover,
html[data-theme="light"] .gd-tbtn:hover {
	background: var(--bg-3);
}

html[data-theme="light"] .gd-nav-link.is-active {
	background: var(--merah-soft);
	color: #cc0000;
	border-color: rgba(207, 62, 67, 0.20);
}

html[data-theme="light"] .gd-footer {
	background: var(--bg-1);
	border-color: var(--ink-line);
}

/* ==========================================================================
   Light theme — inputs / controls
   ========================================================================== */

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
	background: var(--bg-2);
	color: var(--tx-1);
	border-color: var(--ink-line);
}

html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
	border-color: var(--merah);
	background: #f5eee2;
}

/* ==========================================================================
   Light theme — code / preformatted content
   ========================================================================== */

html[data-theme="light"] code,
html[data-theme="light"] pre {
	background: var(--bg-3);
	border-color: var(--ink-line);
	color: var(--tx-1);
}

/* ==========================================================================
   Light theme — scrollbar
   ========================================================================== */

html[data-theme="light"] ::-webkit-scrollbar-track {
	background: #e4dac8;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
	background: #c5b69c;
	border-color: #e4dac8;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
	background: #a9997d;
}