/* ===========================================================================
   DivProxy Design Tokens - Inspired by 9router.com
   Warm minimalism * Coral accent * Light/Dark mode
   ===========================================================================
   Color values pakai RGB triplet supaya bisa pakai opacity helper:
     background-color: rgb(var(--bg) / 0.7);
     color: rgb(var(--text-main));
=========================================================================== */

:root {
  /* Surface */
  --bg:           252 251 249;   /* #FCF9F6 - warm off-white */
  --bg-alt:       248 250 252;   /* #F8FAFC */
  --surface:      255 255 255;   /* #FFFFFF - card */
  --surface-2:    244 244 245;   /* #F4F4F5 - code, chips */

  /* Border */
  --bord:         229 231 235;   /* #E5E7EB */
  --bord-subtle:  241 241 243;   /* #F1F1F3 */

  /* Text */
  --text-main:    10 10 10;      /* #0A0A0A - near black */
  --muted:        107 114 128;   /* #6B7280 - gray-500 */
  --subtle:       156 163 175;   /* #9CA3AF - gray-400 */

  /* Brand - coral terracotta */
  --accent:       230 138 110;   /* #E68A6E */
  --accent-rgb:   230, 138, 110;
  --accent-strong:229 106 74;    /* #E56A4A - saturated */
  --accent-soft:  254 233 224;   /* #FEE9E0 - bg tint */

  /* Status */
  --success:      34 197 94;     /* #22C55E */
  --success-soft: 220 252 231;   /* #DCFCE7 */
  --warning:      245 158 11;    /* #F59E0B */
  --warning-soft: 254 243 199;   /* #FEF3C7 */
  --danger:       239 68 68;     /* #EF4444 */
  --danger-soft:  254 226 226;   /* #FEE2E2 */
  --info:         14 165 233;    /* #0EA5E9 */
  --info-soft:    224 242 254;   /* #E0F2FE */

  /* Layout */
  --container:    1280px;
  --nav-h:        64px;
  --sidebar-w:    240px;

  /* Radius */
  --r-sm:         8px;
  --r-md:         12px;   /* button */
  --r-lg:         16px;   /* card rounded-2xl */
  --r-xl:         24px;   /* big panels */
  --r-full:       999px;

  /* Shadow */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow:       0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg:    0 16px 40px rgba(0, 0, 0, 0.08);
  --shadow-glow:  0 8px 24px -8px rgba(229, 106, 74, 0.45);
  --shadow-coral: 0 2px 12px -2px rgba(229, 106, 74, 0.25);
  --shadow-elev:  inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
                  0 1px 2px rgba(0, 0, 0, 0.4),
                  0 16px 48px -8px rgba(0, 0, 0, 0.55);

  /* Brand gradient */
  --grad-text:    linear-gradient(135deg, #E56A4A, #ee8d6a 50%, #cc5236);
  --grad-bg:      linear-gradient(135deg, #E56A4A, #cc5236 50%, #a64027);

  /* Motion */
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:     150ms;
  --dur:          200ms;
  --dur-slow:     400ms;
}

/* ===================== DARK MODE ===================== */
.dark {
  --bg:           26 26 26;      /* #1A1A1A */
  --bg-alt:       31 31 30;      /* #1F1F1E */
  --surface:      38 38 38;      /* #262626 */
  --surface-2:    48 48 48;      /* #303030 */
  --bord:         51 51 51;      /* #333333 */
  --bord-subtle:  42 42 42;      /* #2A2A2A */
  --text-main:    237 237 237;   /* #EDEDED */
  --muted:        156 163 175;
  --subtle:       107 114 128;
  --accent:       229 106 74;    /* #E56A4A more saturated in dark */
  --accent-soft:  62 32 22;      /* dark tint */

  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:       0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:    0 16px 40px rgba(0, 0, 0, 0.6);
}

/* ===================== RESET + BASE ===================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  color-scheme: light dark;
}

body {
  margin: 0;
  min-width: 320px;
  background-color: rgb(var(--bg));
  color: rgb(var(--text-main));
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }

code, pre, kbd {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Material Symbols sizing default */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
  user-select: none;
}

/* Selection */
::selection {
  background: rgb(var(--accent) / 0.3);
  color: rgb(var(--text-main));
}

/* Scrollbar (subtle) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgb(var(--bord));
  border-radius: 999px;
  border: 2px solid rgb(var(--bg));
}
*::-webkit-scrollbar-thumb:hover { background: rgb(var(--subtle)); }

/* ===================== LANDING BG (decorative) ===================== */
.landing-bg {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  background-color: rgb(var(--bg));
}
.landing-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(var(--bord) / 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--bord) / 0.4) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 70%);
}
.landing-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 10%, rgb(var(--accent) / 0.06), transparent 60%),
    radial-gradient(ellipse 40% 30% at 80% 80%, rgb(var(--accent) / 0.04), transparent 60%);
}

/* ===================== UTILITIES (used across views) ===================== */
.text-grad {
  background: var(--grad-text);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradShift 4s ease infinite;
}

@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 8px 24px -8px rgba(229, 106, 74, 0.45); }
  50%      { box-shadow: 0 12px 32px -8px rgba(229, 106, 74, 0.65); }
}

@keyframes marqueeLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marqueeRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.animate-cta-glow { animation: ctaGlow 3s ease-in-out infinite; }
.animate-marquee-left  { animation: marqueeLeft  40s linear infinite; }
.animate-marquee-right { animation: marqueeRight 40s linear infinite; }

.mask-fade-x {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* Hidden utility */
[hidden] { display: none !important; }