/* ==========================================================================
   Risos AI — Colors & Type Tokens
   PT Riset Sinergi Sosial
   Source: design_handoff_app_redesign/designs/colors_and_type.css

   NOTE: Google Fonts loaded via <link rel="stylesheet"> in base.html
   (preconnect + parallel load). DO NOT @import here — it would parse-block.
   ========================================================================== */

:root {
  /* ── BACKGROUND / SURFACE ─────────────────────────────────── */
  --c-bg-dark:        #0A0F1E;
  --c-bg-deeper:      #060914;
  --c-bg-light:       #F8F9FC;
  --c-bg-paper:       #FFFFFF;
  --c-bg-cream:       #F2F4F9;

  /* App-mode dark surfaces (legacy — used by old shell) */
  --c-app-bg-1:       #0a0a14;
  --c-app-bg-2:       #14141f;
  --c-app-bg-3:       #1a1a2e;

  /* ── PRIMARY (cyan-blue) ─────────────────────────────────── */
  --c-primary:        #3B82F6;
  --c-primary-deep:   #2563EB;
  --c-accent:         #06B6D4;
  --c-accent-bright:  #22D3EE;

  /* ── BRAND IDENTITY (PT Riset Sinergi Sosial — dark blue / navy) ──
     Rio 20 Mei 2026: Risos AI tema biru kegelap-gelapan, bukan ungu/indigo.
     Migrated from indigo (#1e1b4b/#4f46e5/#60A5FA) to navy/blue-800/blue-700.
     ──────────────────────────────────────────────────────────────── */
  --c-brand-deep:     #0c1c3d;
  --c-brand-mid:      #1e3a8a;
  --c-brand:          #1e40af;
  --c-brand-soft:     #60a5fa;

  /* App-mode legacy accent — shifted from indigo→violet to dark blue.
     Kept variable names for backward compat with non-migrated pages. */
  --c-app-accent:        #1d4ed8;
  --c-app-accent-hover:  #1e40af;
  --c-app-accent-soft:   rgba(29,78,216,0.15);

  /* ── TEXT ─────────────────────────────────────────────────── */
  --c-text:                #0F172A;
  --c-text-muted:          #334155;
  --c-text-soft:           #475569;
  --c-text-faint:          #64748B;

  --c-text-on-dark:        #F1F5F9;
  --c-text-on-dark-muted:  #CBD5E1;
  --c-text-on-dark-faint:  #94A3B8;

  /* ── LINES / BORDERS ──────────────────────────────────────── */
  --c-line:           #E2E8F0;
  --c-line-strong:    #CBD5E1;
  --c-line-dark:      rgba(255,255,255,0.08);
  --c-line-dark-2:    rgba(255,255,255,0.16);

  /* ── SEMANTIC ─────────────────────────────────────────────── */
  --c-success:        #22c55e;
  --c-success-soft:   rgba(34,197,94,0.15);
  --c-warning:        #eab308;
  --c-warning-soft:   rgba(234,179,8,0.15);
  --c-danger:         #ef4444;
  --c-danger-soft:    rgba(239,68,68,0.15);

  /* ── GRADIENTS ────────────────────────────────────────────── */
  --grad-primary:       linear-gradient(135deg, #3B82F6 0%, #06B6D4 100%);
  --grad-primary-soft:  linear-gradient(135deg, rgba(59,130,246,0.18) 0%, rgba(6,182,212,0.18) 100%);
  --grad-text:          linear-gradient(120deg, #3B82F6 0%, #06B6D4 60%, #22D3EE 100%);
  --grad-text-deep:     linear-gradient(120deg, #0c1c3d 0%, #1e40af 50%, #2563EB 100%);
  --grad-app-accent:    linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);

  /* ── TYPE FAMILIES ────────────────────────────────────────── */
  --ff-display: 'Playfair Display', 'Times New Roman', serif;
  --ff-body:    'DM Sans', system-ui, sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, monospace;
  --ff-app:     'Inter', system-ui, -apple-system, sans-serif;

  /* ── FLUID TYPE SCALE ─────────────────────────────────────── */
  --fs-xs:      clamp(0.74rem, 0.72rem + 0.08vw, 0.8rem);
  --fs-sm:      clamp(0.85rem, 0.83rem + 0.1vw, 0.92rem);
  --fs-base:    clamp(0.96rem, 0.92rem + 0.2vw, 1.04rem);
  --fs-lede:    clamp(1.05rem, 1.0rem + 0.4vw, 1.2rem);
  --fs-h3:      clamp(1.3rem, 1.15rem + 0.6vw, 1.55rem);
  --fs-h2:      clamp(2.0rem, 1.4rem + 2.4vw, 3.6rem);
  --fs-h1:      clamp(2.6rem, 1.5rem + 4.5vw, 5.8rem);
  --fs-display: clamp(2.4rem, 1.4rem + 3.5vw, 4.6rem);

  /* ── SPACING ──────────────────────────────────────────────── */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4.5rem;   --space-9: 6rem;   --space-10: 8rem;

  /* ── LAYOUT ──────────────────────────────────────────────── */
  --container:        1240px;
  --container-narrow: 880px;
  --container-pad:    clamp(1.25rem, 4vw, 2.5rem);

  /* ── RADII ───────────────────────────────────────────────── */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   32px;
  --r-2xl:  44px;
  --r-pill: 999px;

  /* ── SHADOWS ─────────────────────────────────────────────── */
  --sh-sm:   0 1px 2px rgba(15,23,42,0.05);
  --sh-md:   0 4px 18px -4px rgba(15,23,42,0.08), 0 2px 6px -2px rgba(15,23,42,0.04);
  --sh-lg:   0 14px 50px -16px rgba(15,23,42,0.18), 0 6px 18px -10px rgba(15,23,42,0.08);
  --sh-xl:   0 30px 90px -32px rgba(15,23,42,0.28), 0 12px 36px -16px rgba(15,23,42,0.12);
  --sh-glow: 0 0 0 1px rgba(59,130,246,0.18), 0 16px 60px -16px rgba(59,130,246,0.30), 0 0 80px -8px rgba(6,182,212,0.18);

  /* ── MOTION ──────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.25, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-med:  320ms;
  --t-slow: 600ms;
}

/* ──────────────────────────────────────────────────────────────
   APP-SHELL THEME VARS
   These drive the new shell (header, sidebar, dashboard cards).
   The selectors target <html data-theme="..."> — set by theme.js.
   Legacy components keep using body.theme-{light,dark} via style.css.
   ────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg:        #0A0F1E;
  --bg-elev:   #0F1729;
  --bg-card:   rgba(255,255,255,0.025);
  --bg-input:  rgba(255,255,255,0.04);
  --line:      rgba(255,255,255,0.07);
  --line-2:    rgba(255,255,255,0.14);
  --txt:       #F1F5F9;
  --txt-muted: #94A3B8;
  --txt-faint: #64748B;
  --hairline-grad: linear-gradient(90deg, transparent, rgba(255,255,255,.08) 30%, rgba(255,255,255,.08) 70%, transparent);
}
:root[data-theme="light"] {
  --bg:        #F6F7FB;
  --bg-elev:   #FFFFFF;
  --bg-card:   #FFFFFF;
  --bg-input:  #FFFFFF;
  --line:      #DDE3EC;
  --line-2:    #C2CCDA;
  /* Stronger contrast in light mode — bumped from slate-900/600/400
     ke slate-950/700/500 untuk readability di white surfaces. */
  --txt:       #020617;
  --txt-muted: #334155;
  --txt-faint: #64748B;
  --hairline-grad: linear-gradient(90deg, transparent, rgba(15,23,42,.10) 30%, rgba(15,23,42,.10) 70%, transparent);
}

/* ──────────────────────────────────────────────────────────────────────
   LEGACY --c-* TOKEN OVERRIDES FOR DARK MODE
   Banyak komponen QDA + lainnya pakai `color: var(--c-text)` /
   `background: var(--c-bg-paper)` dst — tokens didefinisikan di :root
   atas TANPA dark mode override → invisible text di dark mode.
   Fix: swap legacy --c-* tokens saat body.theme-dark aktif.
   ────────────────────────────────────────────────────────────────────── */
body.theme-dark {
    /* Text */
    --c-text:                #F1F5F9;   /* slate-100 — visible on dark bg */
    --c-text-muted:          #CBD5E1;   /* slate-300 */
    --c-text-soft:           #94A3B8;   /* slate-400 */
    --c-text-faint:          #64748B;   /* slate-500 — borderline */

    /* Backgrounds */
    --c-bg-paper:            #1E293B;   /* slate-800 — card surface */
    --c-bg-light:            #0F172A;   /* slate-900 — page bg */
    --c-bg-cream:            #0F172A;
    --c-bg-dark:             #0A0F1E;
    --c-bg-deeper:           #060914;

    /* Lines/borders */
    --c-line:                #334155;   /* slate-700 */
    --c-line-strong:         #475569;   /* slate-600 */

    /* Brand-soft / accent surfaces — keep navy but dimmer alpha */
    --c-app-accent-soft:     rgba(96, 165, 250, 0.18);
}

/* :root[data-theme="dark"] equivalent — kalau ada komponen yang pakai
   selektor html-level. Mirror legacy --c-* overrides untuk symmetry. */
:root[data-theme="dark"] {
    --c-text:                #F1F5F9;
    --c-text-muted:          #CBD5E1;
    --c-text-soft:           #94A3B8;
    --c-text-faint:          #64748B;
    --c-bg-paper:            #1E293B;
    --c-bg-light:            #0F172A;
    --c-bg-cream:            #0F172A;
    --c-line:                #334155;
    --c-line-strong:         #475569;
    --c-app-accent-soft:     rgba(96, 165, 250, 0.18);
}

/* ══════════════════════════════════════════════════════════════════════
   UNIFIED BRIEF TOKENS (alias layer) — names from
   design_handoff_full_redesign/tokens.css. Mapped onto the existing
   cyan-blue system so templates can use the brief's vocabulary
   (var(--grad), var(--surface-2), var(--fg), var(--ok)…). Single source.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --grad:       linear-gradient(135deg, #3B82F6 0%, #06B6D4 100%);
  --grad-text-unified: linear-gradient(120deg, #3B82F6 0%, #06B6D4 60%, #22D3EE 100%);
  --logo-indigo-1: #4f46e5;   /* logo mark only */
  --logo-indigo-2: #1e1b4b;   /* logo mark only */
  --ok:   #22C55E;  --ok-soft:   rgba(34,197,94,0.14);
  --warn: #EAB308;  --warn-soft: rgba(234,179,8,0.14);
  --bad:  #EF4444;  --bad-soft:  rgba(239,68,68,0.14);
  --r-sm: 10px; --r-md: 13px; --r-lg: 18px; --r-pill: 999px;
}
:root[data-theme="dark"], body.theme-dark {
  --surface-1: #0C1122; --surface-2: #131A2E; --surface-3: #182138;
  --fg: #EAF0FB; --fg-muted: #98A6C0; --fg-faint: #5E6E88; --text-faint: #5E6E88;
  --accent: #38BDF8; --accent-2: #22D3EE; --accent-soft: rgba(56,189,248,0.10);
  --shadow: 0 16px 40px -20px rgba(0,0,0,0.70); --hl: inset 0 1px 0 rgba(255,255,255,0.05);
}
:root[data-theme="light"], body.theme-light {
  --surface-1: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #F7F9FD;
  --fg: #0F1A2E; --fg-muted: #51607A; --fg-faint: #8593AB; --text-faint: #8593AB;
  --accent: #1D6FE0; --accent-2: #0891B2; --accent-soft: rgba(29,111,224,0.07);
  --shadow: 0 14px 38px -22px rgba(15,30,60,0.28), 0 4px 12px -8px rgba(15,30,60,0.10); --hl: none;
}

/* Inline SVG icon sizing — global (icons replace emoji across all shells) */
.ic { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -0.18em; flex-shrink: 0; }
.ic-lg { width: 1.4em; height: 1.4em; }
.ic-sm { width: 0.95em; height: 0.95em; }