/* ==========================================================================
   BASKARA RIAU TEKNIK (BRT) - FIGMA DESIGN SYSTEM & TOKENS ENGINE
   Standards-compliant Auto-Layout, 8pt Grid & Dual-Theme Tokens
   ========================================================================== */

:root {
  /* --- 1. FIGMA 8-POINT SPACING GRID --- */
  --figma-space-0: 0px;
  --figma-space-4: 4px;
  --figma-space-8: 8px;   /* Base grid unit */
  --figma-space-12: 12px;
  --figma-space-16: 16px;
  --figma-space-20: 20px;
  --figma-space-24: 24px;
  --figma-space-32: 32px;
  --figma-space-40: 40px;
  --figma-space-48: 48px;
  --figma-space-64: 64px;
  --figma-space-80: 80px;
  --figma-space-96: 96px;

  /* --- 2. FIGMA BORDER RADII --- */
  --figma-radius-xs: 4px;
  --figma-radius-sm: 6px;
  --figma-radius-md: 8px;   /* Buttons & Inputs */
  --figma-radius-lg: 12px;  /* Small cards & Badges */
  --figma-radius-xl: 16px;  /* Main containers & Featured media */
  --figma-radius-full: 9999px; /* Pills */

  /* --- 3. FIGMA SHADOW / ELEVATION TOKENS --- */
  --figma-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  --figma-elevation-2: 0 4px 14px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.10);
  --figma-elevation-3: 0 12px 32px rgba(0, 0, 0, 0.24), 0 4px 12px rgba(0, 0, 0, 0.12);
  --figma-glow-gold: 0 6px 20px rgba(242, 177, 10, 0.35);
  --figma-glow-wa: 0 6px 20px rgba(37, 211, 102, 0.40);

  /* --- 4. FIGMA TYPOGRAPHY SCALES --- */
  --figma-font-heading: 'Oswald', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --figma-font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Base Light Theme Tokens */
  --figma-bg-canvas: #F6F4EE;
  --figma-bg-surface: #FFFFFF;
  --figma-bg-surface-subtle: #ECE8DE;
  --figma-border: #DDD7CA;
  --figma-text-primary: #12223B;
  --figma-text-body: #46505E;
  --figma-text-muted: #6B7380;
  --figma-accent: #B45309; /* High contrast amber on light mode */
  --figma-accent-gold: #F2B10A;
}

/* Dark Theme Tokens Override (Default for Industrial High-Voltage Mode) */
html[data-theme="dark"],
:root:not([data-theme="light"]) {
  --figma-bg-canvas: #0E1A2E;
  --figma-bg-surface: #1C3152;
  --figma-bg-surface-subtle: #172B4A;
  --figma-border: #284268;
  --figma-text-primary: #F6F4EE;
  --figma-text-body: #C9D3E0;
  --figma-text-muted: #9FB0C6;
  --figma-accent: #F2B10A; /* Radiant electric gold on dark navy */
  --figma-accent-gold: #F2B10A;
}

/* Explicit Light Theme */
html[data-theme="light"] {
  --figma-bg-canvas: #F6F4EE;
  --figma-bg-surface: #FFFFFF;
  --figma-bg-surface-subtle: #ECE8DE;
  --figma-border: #DDD7CA;
  --figma-text-primary: #12223B;
  --figma-text-body: #46505E;
  --figma-text-muted: #6B7380;
  --figma-accent: #B45309;
  --figma-accent-gold: #F2B10A;
}

/* ==========================================================================
   5. FIGMA AUTO-LAYOUT HELPER UTILITIES
   Directly mirror Figma's Auto-Layout frame behaviors
   ========================================================================== */

/* Auto-Layout Horizontal (Row) */
.figma-auto-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  box-sizing: border-box;
}

/* Auto-Layout Vertical (Column) */
.figma-auto-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  box-sizing: border-box;
}

/* Auto-Layout Sizing behaviors */
.figma-hug {
  flex: 0 0 auto !important;
  width: fit-content !important;
  max-width: 100%;
}

.figma-fill {
  flex: 1 1 0% !important;
  min-width: 0;
  width: 100%;
}

/* Alignment rules */
.figma-align-start { align-items: flex-start !important; }
.figma-align-center { align-items: center !important; }
.figma-align-end { align-items: flex-end !important; }
.figma-justify-start { justify-content: flex-start !important; }
.figma-justify-center { justify-content: center !important; }
.figma-justify-between { justify-content: space-between !important; }

/* 8pt Grid Gaps */
.figma-gap-4  { gap: var(--figma-space-4) !important; }
.figma-gap-8  { gap: var(--figma-space-8) !important; }
.figma-gap-12 { gap: var(--figma-space-12) !important; }
.figma-gap-16 { gap: var(--figma-space-16) !important; }
.figma-gap-24 { gap: var(--figma-space-24) !important; }
.figma-gap-32 { gap: var(--figma-space-32) !important; }
.figma-gap-48 { gap: var(--figma-space-48) !important; }
.figma-gap-64 { gap: var(--figma-space-64) !important; }

/* Standard Padding Frames */
.figma-pad-sm { padding: var(--figma-space-8) var(--figma-space-16) !important; }
.figma-pad-md { padding: var(--figma-space-16) var(--figma-space-24) !important; }
.figma-pad-lg { padding: var(--figma-space-24) var(--figma-space-32) !important; }
.figma-pad-xl { padding: var(--figma-space-32) var(--figma-space-48) !important; }

/* ==========================================================================
   6. FIGMA COMPONENT SYSTEM (Standardized Building Blocks)
   ========================================================================== */

/* Standard Figma Card */
.figma-card {
  background: var(--figma-bg-surface);
  border: 1px solid var(--figma-border);
  border-radius: var(--figma-radius-xl);
  box-shadow: var(--figma-elevation-1);
  padding: var(--figma-space-24);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}

.figma-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--figma-elevation-2);
  border-color: rgba(242, 177, 10, 0.4);
}

@media (max-width: 768px) {
  .figma-card {
    padding: var(--figma-space-16);
    border-radius: var(--figma-radius-lg);
  }
}

/* Standard Figma Badge / Chip */
.figma-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--figma-space-4);
  font-family: var(--figma-font-heading);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: var(--figma-radius-full);
  line-height: 1.2;
}

.figma-badge--gold {
  background: rgba(242, 177, 10, 0.15);
  color: var(--figma-accent);
  border: 1px solid rgba(242, 177, 10, 0.35);
}

.figma-badge--navy {
  background: rgba(18, 34, 59, 0.12);
  color: var(--figma-text-primary);
  border: 1px solid var(--figma-border);
}

/* Primary High-Impact CTA Button */
.figma-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--figma-space-8);
  font-family: var(--figma-font-heading);
  font-size: 14.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, #FFE27A 0%, #F2B10A 50%, #C88E00 100%);
  color: #0A1424 !important;
  padding: 12px 24px;
  border-radius: var(--figma-radius-full);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: var(--figma-glow-gold);
  text-decoration: none !important;
  cursor: pointer;
  min-height: 44px; /* WCAG touch compliance */
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.figma-btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(242, 177, 10, 0.5);
  color: #000000 !important;
}

/* Ghost / Secondary Button */
.figma-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--figma-space-8);
  font-family: var(--figma-font-heading);
  font-size: 14.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: transparent;
  color: var(--figma-text-primary) !important;
  padding: 11px 22px;
  border-radius: var(--figma-radius-full);
  border: 1.5px solid var(--figma-border);
  text-decoration: none !important;
  cursor: pointer;
  min-height: 44px;
  transition: all 0.2s ease;
}

.figma-btn-ghost:hover {
  border-color: var(--figma-accent-gold);
  color: var(--figma-accent-gold) !important;
  background: rgba(242, 177, 10, 0.06);
}

/* Interactive Input Controls */
.figma-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--figma-border);
  border-radius: var(--figma-radius-md);
  font-family: var(--figma-font-body);
  font-size: 15px;
  background: var(--figma-bg-surface-subtle);
  color: var(--figma-text-primary);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.figma-input:focus {
  border-color: var(--figma-accent-gold);
  box-shadow: 0 0 0 3px rgba(242, 177, 10, 0.25);
}

/* 12-Column Responsive Figma Grid Container */
.figma-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--figma-space-24);
  width: 100%;
}

@media (max-width: 991px) {
  .figma-grid-12 {
    gap: var(--figma-space-16);
  }
}

@media (max-width: 767px) {
  .figma-grid-12 {
    grid-template-columns: 1fr;
    gap: var(--figma-space-16);
  }
}