/* Variabel desain global: :root, skema warna terang/gelap.
   Semua berkas lain bergantung pada token di sini, jadi muat paling awal.

   Dulu berkas ini punya DUA blok :root terpisah dengan 93 token bertumpang tindih.
   Blok kedua diam-diam memenangkan cascade, sehingga 12 token --font-family-*
   di blok pertama (yang menyebut "Inter") tidak pernah berlaku sama sekali.
   Kedua blok kini digabung menjadi satu sumber kebenaran, memakai nilai pemenang
   lama supaya rendering tidak bergeser sedikit pun.

   PALET (mengikuti template-kompas: ungu neon di atas latar hampir hitam).
   Token --c-* di bawah adalah sumber tunggal warna tema; kedua skema
   (.color-scheme-light untuk isi/footer, .color-scheme-dark untuk header)
   hanya memetakan token itu ke nama token vendor Envato. Ganti palet cukup
   di blok --c-*.

   Catatan nama: Envato menyebut skema isi halaman "light" dan header "dark".
   Nama kelasnya dipertahankan (dipakai di ratusan selektor vendor), tetapi
   KEDUANYA kini gelap: "light" = panel ungu-gelap #0a0612, "dark" = hitam #000
   seperti header Kompas. Kontras tiap pasangan teks/latar sudah dihitung
   (WCAG): putih 20:1, --c-text-body 14.8:1, --c-text-muted 9:1,
   --c-text-faint 4.7:1, --c-accent-light 7.4:1 di atas #0a0612. */

:root {
  /* Aksen ungu (identik dengan template-kompas/css-assets/base/theme.css) */
  --c-accent: #9d4edd;          /* aksen utama: border, glow, ikon aktif */
  --c-accent-light: #c77dff;    /* aksen terang: tautan, highlight */
  --c-accent-pale: #e0aaff;     /* lavender: ujung gradien teks */
  --c-accent-mid: #7b2cbf;      /* hover tombol, garis gradien */
  --c-accent-deep: #5a189a;     /* ujung bawah gradien tombol */
  --c-accent-dark: #3c096c;     /* border tombol, awal gradien */
  --c-accent-night: #2a0a4a;    /* tepi gradien garis panel */
  --c-accent-rgb: 157, 78, 221; /* untuk rgba(var(--c-accent-rgb), a) */

  /* Latar gelap */
  --c-bg-black: #000000;        /* header & footer (Kompas: hitam pekat) */
  --c-bg-panel: #0a0612;        /* panel/kartu/isi halaman */
  --c-bg-item: #130b1e;         /* item di dalam panel */
  --c-bg-sunken: #0f0818;       /* area jawaban/terbenam */

  /* Teks di atas latar gelap */
  --c-text-title: #ffffff;
  --c-text-body: #e4d9f2;       /* paragraf, jawaban */
  --c-text-muted: #b9a6d1;      /* sub-judul, keterangan */
  --c-text-faint: #8f6bb5;      /* footer kecil, label */
  --c-link: var(--c-accent-light);
  --c-link-hover: var(--c-accent-pale);

  /* Tombol utama */
  --c-btn-text: #ffffff;
  --c-btn-gradient: linear-gradient(to bottom, var(--c-accent) 0, var(--c-accent-deep) 100%);
  --c-btn-gradient-hover: linear-gradient(to bottom, var(--c-accent-light) 0, var(--c-accent-mid) 100%);
  --c-btn-border: var(--c-accent-dark);

  --breakpoint-medium: 700px;
  --breakpoint-wide: 1024px;
  --breakpoint-extra-wide: 1440px;
  --breakpoint-2k-wide: 2560px;
  --chunkiness-none: 0px;
  --chunkiness-thin: 1px;
  --chunkiness-thick: 2px;
  --elevation-medium: 0px 2px 12px 0px rgba(0, 0, 0, .15);
  --font-family-body-large: "PolySans", "Helvetica Neue", "Arial", sans-serif;
  --font-family-body-small: "PolySans", "Helvetica Neue", "Arial", sans-serif;
  --font-family-campaign-large: "PolySans", "Helvetica Neue", "Arial", sans-serif;
  --font-family-campaign-small: "PolySans", "Helvetica Neue", "Arial", sans-serif;
  --font-family-label-large: "PolySans", "Helvetica Neue", "Arial", sans-serif;
  --font-family-label-small: "PolySans", "Helvetica Neue", "Arial", sans-serif;
  --font-family-micro: "PolySans", "Helvetica Neue", "Arial", sans-serif;
  --font-family-subheading: "PolySans", "Helvetica Neue", "Arial", sans-serif;
  --font-family-title-1: "PolySans", "Helvetica Neue", "Arial", sans-serif;
  --font-family-title-2: "PolySans", "Helvetica Neue", "Arial", sans-serif;
  --font-family-title-3: "PolySans", "Helvetica Neue", "Arial", sans-serif;
  --font-family-title-4: "PolySans", "Helvetica Neue", "Arial", sans-serif;
  --font-height-body-large: 1.5;
  --font-height-body-small: 1.5;
  --font-height-campaign-large: 1;
  --font-height-campaign-small: 1;
  --font-height-label-large: 1.5;
  --font-height-label-small: 1.5;
  --font-height-micro: 1.5;
  --font-height-subheading: 1.5;
  --font-height-title-1: 1;
  --font-height-title-2: 1;
  --font-height-title-3: 1;
  --font-height-title-4: 1;
  --font-size-body-large: 1rem;
  --font-size-body-small: 0.875rem;
  --font-size-campaign-large: 4.5rem;
  --font-size-campaign-small: 2.25rem;
  --font-size-label-large: 1rem;
  --font-size-label-small: 0.875rem;
  --font-size-micro: 0.75rem;
  --font-size-subheading: 1.125rem;
  --font-size-title-1: 3rem;
  --font-size-title-2: 2.25rem;
  --font-size-title-3: 1.875rem;
  --font-size-title-4: 1.5rem;
  --font-spacing-body-large: 0;
  --font-spacing-body-small: 0;
  --font-spacing-campaign-large: 0;
  --font-spacing-campaign-small: 0;
  --font-spacing-label-large: 0;
  --font-spacing-label-small: 0.02em;
  --font-spacing-micro: 0.02em;
  --font-spacing-subheading: 0;
  --font-spacing-title-1: 0;
  --font-spacing-title-2: 0;
  --font-spacing-title-3: 0;
  --font-spacing-title-4: 0;
  --font-weight-body-large: 400;
  --font-weight-body-small: 400;
  --font-weight-campaign-large: 700;
  --font-weight-campaign-small: 700;
  --font-weight-label-large: 600;
  --font-weight-label-small: 600;
  --font-weight-micro: 400;
  --font-weight-subheading: 600;
  --font-weight-title-1: 600;
  --font-weight-title-2: 600;
  --font-weight-title-3: 600;
  --font-weight-title-4: 600;
  --icon-size-1x: 16px;
  --icon-size-2x: 24px;
  --icon-size-3x: 32px;
  --icon-size-4x: 40px;
  --icon-size-5x: 48px;
  --icon-size-text-responsive: 1.5em;
  --minimum-touch-area: 40px;
  --min-touch-area: 48px;
  --roundness-square: 0px;
  --roundness-subtle: 4px;
  --roundness-extra-round: 16px;
  --roundness-circle: 48px;
  --spacing-none: 0px;
  --spacing-1x: 4px;
  --spacing-2x: 8px;
  --spacing-3x: 16px;
  --spacing-4x: 24px;
  --spacing-5x: 32px;
  --spacing-6x: 40px;
  --spacing-7x: 64px;
  --spacing-8x: 128px;
  --transition-duration-long: 500ms;
  --transition-duration-medium: 300ms;
  --transition-duration-short: 150ms;
  --transition-easing-linear: cubic-bezier(0, 0, 1, 1);
  --transition-easing-ease-in: cubic-bezier(0.42, 0, 1, 1);
  --transition-easing-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --transition-easing-ease-out: cubic-bezier(0, 0, 0.58, 1);
  --button-height-large: 48px;
  --button-height-medium: 40px;
  --button-x-padding-large: var(--spacing-4x);
  --button-x-padding-medium: var(--spacing-3x);
  --button-font-family: var(--font-family-label-large);
  --button-font-size-large: var(--font-size-label-large);
  --button-font-size-medium: var(--font-size-label-small);
  --button-font-weight: var(--font-weight-label-large);
  --button-font-height: var(--font-height-label-large);
  --button-font-spacing: var(--font-spacing-label-large);
  --layer-depth-ceiling: 9999;
  --shadow-500: 0px 2px 12px 0px rgba(0, 0, 0, .15);
  --text-style-body-large-family: var(--font-family-body-large);
  --text-style-body-large-size: var(--font-size-body-large);
  --text-style-body-large-spacing: var(--font-spacing-body-large);
  --text-style-body-large-weight: var(--font-weight-body-large);
  --text-style-body-large-height: var(--font-height-body-large);
  --text-style-body-large-strong-weight: 700;
  --text-style-body-small-family: var(--font-family-body-small);
  --text-style-body-small-size: var(--font-size-body-small);
  --text-style-body-small-spacing: var(--font-spacing-body-small);
  --text-style-body-small-weight: var(--font-weight-body-small);
  --text-style-body-small-height: var(--font-height-body-small);
  --text-style-body-small-strong-weight: 700;
  --text-style-campaign-large-family: var(--font-family-campaign-large);
  --text-style-campaign-large-size: var(--font-size-campaign-large);
  --text-style-campaign-large-spacing: var(--font-spacing-campaign-large);
  --text-style-campaign-large-weight: var(--font-weight-campaign-large);
  --text-style-campaign-large-height: var(--font-height-campaign-large);
  --text-style-campaign-small-family: var(--font-family-campaign-small);
  --text-style-campaign-small-size: var(--font-size-campaign-small);
  --text-style-campaign-small-spacing: var(--font-spacing-campaign-small);
  --text-style-campaign-small-weight: var(--font-weight-campaign-small);
  --text-style-campaign-small-height: var(--font-height-campaign-small);
  --text-style-chip-family: var(--font-family-body-large);
  --text-style-chip-spacing: var(--font-spacing-body-large);
  --text-style-chip-xlarge-size: 1.5rem;
  --text-style-chip-xlarge-weight: 600;
  --text-style-chip-xlarge-height: 1;
  --text-style-chip-large-size: var(--font-size-body-large);
  --text-style-chip-large-weight: var(--font-weight-body-large);
  --text-style-chip-large-height: var(--font-height-body-large);
  --text-style-chip-medium-size: var(--font-size-body-small);
  --text-style-chip-medium-weight: var(--font-weight-body-small);
  --text-style-chip-medium-height: var(--font-height-body-small);
  --text-style-label-large-family: var(--font-family-label-large);
  --text-style-label-large-size: var(--font-size-label-large);
  --text-style-label-large-spacing: var(--font-spacing-label-large);
  --text-style-label-large-weight: var(--font-weight-label-large);
  --text-style-label-large-height: var(--font-height-label-large);
  --text-style-label-small-family: var(--font-family-label-small);
  --text-style-label-small-size: var(--font-size-label-small);
  --text-style-label-small-spacing: var(--font-spacing-label-small);
  --text-style-label-small-weight: var(--font-weight-label-small);
  --text-style-label-small-height: var(--font-height-label-small);
  --text-style-micro-family: var(--font-family-micro);
  --text-style-micro-size: var(--font-size-micro);
  --text-style-micro-spacing: var(--font-spacing-micro);
  --text-style-micro-weight: var(--font-weight-micro);
  --text-style-micro-height: var(--font-height-micro);
  --text-style-subheading-family: var(--font-family-subheading);
  --text-style-subheading-size: var(--font-size-subheading);
  --text-style-subheading-spacing: var(--font-spacing-subheading);
  --text-style-subheading-weight: var(--font-weight-subheading);
  --text-style-subheading-height: var(--font-height-subheading);
  --text-style-title-1-family: var(--font-family-title-1);
  --text-style-title-1-size: var(--font-size-title-1);
  --text-style-title-1-spacing: var(--font-spacing-title-1);
  --text-style-title-1-weight: var(--font-weight-title-1);
  --text-style-title-1-height: var(--font-height-title-1);
  --text-style-title-2-family: var(--font-family-title-2);
  --text-style-title-2-size: var(--font-size-title-2);
  --text-style-title-2-spacing: var(--font-spacing-title-2);
  --text-style-title-2-weight: var(--font-weight-title-2);
  --text-style-title-2-height: var(--font-height-title-2);
  --text-style-title-3-family: var(--font-family-title-3);
  --text-style-title-3-size: var(--font-size-title-3);
  --text-style-title-3-spacing: var(--font-spacing-title-3);
  --text-style-title-3-weight: var(--font-weight-title-3);
  --text-style-title-3-height: var(--font-height-title-3);
  --text-style-title-4-family: var(--font-family-title-4);
  --text-style-title-4-size: var(--font-size-title-4);
  --text-style-title-4-spacing: var(--font-spacing-title-4);
  --text-style-title-4-weight: var(--font-weight-title-4);
  --text-style-title-4-height: var(--font-height-title-4);
  --transition-base: 0.2s
}


/* Skema ISI HALAMAN & KANVAS (nama vendor "light": Editorial Canvas).
   Latar abu-mutiara sejuk #f4f3f8, kartu artikel putih #ffffff, tipografi ink
   pekat #1e1b2e, dan garis border/aksen ungu neon Kompas (#9d4edd). */
.color-scheme-light {
  color: var(--color-content-primary, #1e1b2e);
  --color-border-caution: #dda94a;
  --color-border-critical: #ff5c8a;
  --color-border-info: #4cc9f0;
  --color-border-positive: #4ade80;
  --color-border-primary: var(--c-accent);
  --color-border-promotion: var(--c-accent-light);
  --color-border-prompt: var(--c-accent);
  --color-border-secondary: rgba(var(--c-accent-rgb), .3);
  --color-border-tertiary: rgba(var(--c-accent-rgb), .2);
  --color-content-caution-default: #8a6320;
  --color-content-caution-strong: #4a3512;
  --color-content-critical-default: #9e3a51;
  --color-content-critical-strong: #7d3145;
  --color-content-disabled: #8c8c8c;
  --color-content-info-default: #3a6e7c;
  --color-content-info-strong: #335a66;
  --color-content-interactive: var(--c-accent-mid);
  --color-content-inverse: #fff;
  --color-content-neutral-default: #272338;
  --color-content-neutral-strong: #14121f;
  --color-content-positive-default: #3d7460;
  --color-content-positive-strong: #2f5a4a;
  --color-content-primary: #1e1b2e;
  --color-content-primary-accent: var(--c-accent-mid);
  --color-content-promotion: var(--c-accent-pale);
  --color-content-secondary: #5c5a66;
  --color-content-primary-accent-inverse: #fff;
  --color-overlay-dark: rgba(6, 2, 14, .78);
  --color-overlay-light: rgba(var(--c-accent-rgb), .08);
  --color-surface-caution-default: #faf6ec;
  --color-surface-caution-strong: #c8912f;
  --color-surface-critical-default: #f7eeef;
  --color-surface-critical-strong: #c2506a;
  --color-surface-elevated: #ffffff;
  --color-surface-info-default: #eef4f5;
  --color-surface-info-strong: #4a93a6;
  --color-surface-interactive-control: var(--c-accent);
  --color-surface-interactive-control-hover: var(--c-accent-mid);
  --color-surface-interactive-control-mask: rgba(6, 2, 14, .7);
  --color-surface-interactive-disabled: #e5e0f5;
  --color-surface-interactive-primary: var(--c-accent);
  --color-surface-interactive-primary-hover: var(--c-accent-mid);
  --color-surface-interactive-secondary: transparent;
  --color-surface-interactive-secondary-hover: rgba(var(--c-accent-rgb), .12);
  --color-surface-interactive-tertiary: transparent;
  --color-surface-interactive-tertiary-hover: rgba(var(--c-accent-rgb), .06);
  --color-surface-inverse: #1e1b2e;
  --color-surface-neutral-default: #f4f3f8;
  --color-surface-neutral-strong: #332e47;
  --color-surface-positive-default: #eef5f1;
  --color-surface-positive-strong: #4f9478;
  --color-surface-primary: #f4f3f8;
  --color-surface-promotion: #f2e6ec;
  --color-surface-sale: var(--c-accent-mid);
  --color-surface-secondary: var(--c-bg-black);
  --color-surface-table-row-even: #f9f8fc;
  --color-surface-table-row-hover: #ede9f5;
  --color-surface-table-row-odd: #ffffff;
  --color-surface-table-head: #ede9f5;
  --color-surface-tertiary: #ede9f5;
  --color-interactive-control: var(--color-surface-interactive-control);
  --color-interactive-control-hover: var(--color-surface-interactive-control-hover);
  --color-interactive-disabled: var(--color-surface-interactive-disabled);
  --color-interactive-primary: var(--color-surface-interactive-primary);
  --color-interactive-primary-hover: var(--color-surface-interactive-primary-hover);
  --color-interactive-secondary: var(--color-surface-interactive-secondary);
  --color-interactive-secondary-hover: var(--color-surface-interactive-secondary-hover);
  --color-interactive-tertiary: var(--color-surface-interactive-tertiary);
  --color-interactive-tertiary-hover: var(--color-surface-interactive-tertiary-hover);
  --color-overlay-interactive: var(--color-overlay-dark);
  --color-surface-accent: var(--color-surface-tertiary);
  --color-banana-light: var(--c-accent-light);
  --color-banana-dark: var(--c-accent)
}

/* Skema HEADER (nama vendor "dark"): hitam pekat seperti header Kompas. */
.color-scheme-dark {
  color: var(--color-content-primary, #fff);
  --color-always-white: #fff;
  --color-border-caution: #dda94a;
  --color-border-critical: #ff5c8a;
  --color-border-info: #4cc9f0;
  --color-border-positive: #4ade80;
  --color-border-primary: var(--c-accent);
  --color-border-promotion: var(--c-accent-light);
  --color-border-prompt: var(--c-accent);
  --color-border-secondary: rgba(var(--c-accent-rgb), .35);
  --color-border-tertiary: rgba(var(--c-accent-rgb), .25);
  --color-content-caution-default: #dda94a;
  --color-content-caution-strong: #e8d5a3;
  --color-content-critical-default: #ff5c8a;
  --color-content-critical-strong: #ffb3c6;
  --color-content-disabled: #5e4a78;
  --color-content-info-default: #4cc9f0;
  --color-content-info-strong: #b6ecfb;
  --color-content-interactive: #fff;
  --color-content-inverse: var(--c-bg-black);
  --color-content-neutral-default: #fff;
  --color-content-neutral-strong: var(--c-text-body);
  --color-content-positive-default: #4ade80;
  --color-content-positive-strong: #bbf7d0;
  --color-content-primary: #fff;
  --color-content-primary-accent: var(--c-accent-light);
  --color-content-promotion: var(--c-accent-pale);
  --color-content-secondary: var(--c-text-muted);
  --color-content-primary-accent-inverse: var(--c-bg-black);
  --color-overlay-dark: rgba(6, 2, 14, .78);
  --color-overlay-light: rgba(var(--c-accent-rgb), .12);
  --color-surface-caution-default: #3a2a0c;
  --color-surface-caution-strong: #dda94a;
  --color-surface-critical-default: #3a0f1e;
  --color-surface-critical-strong: #ff5c8a;
  --color-surface-elevated: var(--c-bg-panel);
  --color-surface-info-default: #0c2a36;
  --color-surface-info-strong: #4cc9f0;
  --color-surface-interactive-control: var(--c-accent);
  --color-surface-interactive-control-hover: var(--c-accent-mid);
  --color-surface-interactive-control-mask: rgba(6, 2, 14, .7);
  --color-surface-interactive-disabled: #1f1530;
  --color-surface-interactive-primary: var(--c-accent);
  --color-surface-interactive-primary-hover: var(--c-accent-mid);
  --color-surface-interactive-secondary: transparent;
  --color-surface-interactive-secondary-hover: rgba(var(--c-accent-rgb), .2);
  --color-surface-interactive-tertiary: transparent;
  --color-surface-interactive-tertiary-hover: rgba(var(--c-accent-rgb), .12);
  --color-surface-inverse: #fff;
  --color-surface-neutral-default: var(--c-bg-panel);
  --color-surface-neutral-strong: var(--c-accent-dark);
  --color-surface-positive-default: #0d2b1a;
  --color-surface-positive-strong: #4ade80;
  --color-surface-primary: var(--c-bg-black);
  --color-surface-promotion: var(--c-accent-night);
  --color-surface-sale: var(--c-accent-mid);
  --color-surface-secondary: var(--c-bg-panel);
  --color-surface-table-row-even: var(--c-bg-item);
  --color-surface-table-row-hover: var(--c-accent-night);
  --color-surface-table-row-odd: var(--c-bg-panel);
  --color-surface-table-head: var(--c-accent-dark);
  --color-surface-tertiary: var(--c-bg-panel);
  --color-interactive-control: var(--color-surface-interactive-control);
  --color-interactive-control-hover: var(--color-surface-interactive-control-hover);
  --color-interactive-disabled: var(--color-surface-interactive-disabled);
  --color-interactive-primary: var(--color-surface-interactive-primary);
  --color-interactive-primary-hover: var(--color-surface-interactive-primary-hover);
  --color-interactive-secondary: var(--color-surface-interactive-secondary);
  --color-interactive-secondary-hover: var(--color-surface-interactive-secondary-hover);
  --color-interactive-tertiary: var(--color-surface-interactive-tertiary);
  --color-interactive-tertiary-hover: var(--color-surface-interactive-tertiary-hover);
  --color-overlay-interactive: var(--color-overlay-dark);
  --color-surface-accent: var(--color-surface-tertiary)
}