/* Shariacrypto brand tokens
   Sumber: cangkang Research Note (research-note/rn_shell.html).
   Brand ini sengaja dark-first: latar hijau tua, aksen hijau/cyan, CTA emas. */
:root {
  /* palet dasar */
  --green-950: #041F12;
  --green-900: #062A17;
  --green-850: #0A3D1F;
  --green-800: #0F2A1A;
  --green-750: #122E1E;
  --green-400: #00E676;
  --cyan-400: #00C8E0;
  --gold-500: #FFC107;
  --gold-600: #EF9F27;
  --white: #FFFFFF;
  --off-white: #E8EAF0;
  --muted: #B0B8B4;
  --border: #1E4A2A;
  --border-strong: #2A6B3A;

  /* status */
  --success: #00E676;
  --success-solid: #16C784;
  --warning: #FFC107;
  --warning-solid: #EF9F27;
  --danger: #FF8A8A;
  --danger-solid: #E24B4A;
  --info: #40C4FF;
  --info-solid: #378ADD;
  --success-bg: #16C78412;
  --warning-bg: #FFC10712;
  --danger-bg: #E24B4A12;
  --info-bg: #40C4FF12;

  /* gradien logo */
  --logo-gradient: linear-gradient(135deg, #00C8E0 0%, #00E676 100%);
  --gradient-line: linear-gradient(90deg, #00C8E0 0%, #00E676 100%);

  /* peran semantik */
  --bg-base: var(--green-950);
  --bg-alt: var(--green-900);
  --surface-card: var(--green-850);
  --surface-raised: var(--green-750);
  --text-primary: var(--white);
  --text-body: var(--off-white);
  --text-muted: var(--muted);
  --accent: var(--success-solid);
  --accent-cta: var(--gold-500);
  --border-default: var(--border);
  --border-emphasis: var(--border-strong);

  /* tipografi */
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  color-scheme: dark;
}

/* dari Design System: backgrounds.css */
:root {
  /* Faint 1px ledger grid, 48px cells */
  --bg-grid:
    repeating-linear-gradient(0deg,   rgba(255,255,255,.022) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg,  rgba(255,255,255,.022) 0 1px, transparent 1px 48px); /* @kind other */

  /* Dot mesh, 28px pitch */
  --bg-dots:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px) 0 0 / 28px 28px; /* @kind other */

  /* Cyan→green ambient bloom (8–14% opacity) — the logo as light */
  --bg-bloom-tr:
    radial-gradient(120% 130% at 88% 10%, rgba(0,200,224,.14) 0%, rgba(0,230,118,.08) 26%, transparent 58%); /* @kind other */
  --bg-bloom-bl:
    radial-gradient(120% 130% at 12% 100%, rgba(0,200,224,.12) 0%, rgba(0,230,118,.07) 28%, transparent 60%); /* @kind other */

  /* Vignette to seat content and darken edges */
  --bg-vignette:
    radial-gradient(120% 100% at 50% 0%, transparent 55%, rgba(0,0,0,.28) 100%); /* @kind other */
}

/* dari Design System: spacing.css */
:root {
  /* --- Spacing scale (4px base) --- */
  --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-15: 60px;   /* slide safe-zone padding */
  --sp-20: 80px;

  /* Canvas safe zones (per platform) */
  --safe-feed:  60px;   /* Instagram feed 1080 */
  --safe-x:     40px;   /* Twitter / Telegram */

  /* --- Radii --- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* --- Borders --- */
  --bw-hairline: 1px;
  --bw-accent:   3px;   /* top accent rule on slides */

  /* --- Shadows (subtle, used sparingly on dark canvas) --- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:   0 6px 20px rgba(0,0,0,0.35);
  --shadow-lg:   0 18px 50px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 24px rgba(0,230,118,0.22);   /* green accent glow */

  /* --- Motion --- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */

  /* --- Blur (glass surfaces, used rarely) --- */
  --blur-glass: blur(16px); /* @kind other */
}