/* ============================================
   RCS Brand Tokens — Contemporary Color System
   Guidelines: docs/BRAND-GUIDELINES.md
   ============================================ */

:root {
  /* 3.1 — Warna Identitas Utama */
  --brand-gradient-start: #FF2A2A;
  --brand-gradient-end: #FF7B22;
  --brand-black: #000000;
  --brand-white: #FFFFFF;

  /* 3.2 — Warna Sekunder Dasbor & Infrastruktur Digital */
  --trust-blue: #0F2B46;
  --slate-gray: #4A5568;
  --warm-sand: #DBCDBA;

  /* 3.3 — Warna Indikator Kepatuhan & Manajemen Risiko */
  --crimson-alert: #B91C1C;
  --amber-warning: #D97706;
  --verify-green: #2E8555;

  /* Legacy aliases (backward compat) */
  --brand-red: var(--brand-gradient-start);
  --brand-orange: var(--brand-gradient-end);
  --brand-peach: var(--brand-gradient-end);
  --brand-amber: var(--amber-warning);
  --brand-charcoal: var(--trust-blue);
  --brand-gray-900: #0A1628;
  --brand-gray-700: var(--slate-gray);
  --brand-gray-500: #718096;
  --brand-gray-200: var(--warm-sand);

  /* Semantic mapping */
  --primary: var(--brand-gradient-end);
  --primary-light: var(--brand-gradient-end);
  --primary-dark: var(--brand-gradient-start);
  --secondary: var(--trust-blue);
  --secondary-dark: var(--brand-black);
  --accent: var(--brand-gradient-end);
  --accent-orange: var(--amber-warning);
  --info: var(--trust-blue);
  --success: var(--verify-green);
  --warning: var(--amber-warning);
  --danger: var(--crimson-alert);

  /* WCAG AA text on tinted badge / nav surfaces (light theme) */
  --badge-primary-text: #C2410C;
  --badge-success-text: #1A5636;
  --badge-warning-text: #92400E;
  --badge-danger-text: #991B1B;
  --badge-info-text: var(--trust-blue);
  --nav-accent-text: var(--trust-blue);

  /* RGB tuples for translucent overlays */
  --brand-rgb: 255, 123, 34;
  --brand-red-rgb: 255, 42, 42;
  --trust-blue-rgb: 15, 43, 70;
  --slate-gray-rgb: 74, 85, 104;
  --crimson-rgb: 185, 28, 28;
  --amber-rgb: 217, 119, 6;
  --verify-rgb: 46, 133, 85;

  /* Gradients — RCS identity */
  --brand-gradient: linear-gradient(90deg, var(--brand-gradient-start) 0%, var(--brand-gradient-end) 100%);
  --brand-gradient-diagonal: linear-gradient(135deg, var(--brand-gradient-start) 0%, var(--brand-gradient-end) 100%);
  --brand-gradient-vertical: linear-gradient(180deg, var(--brand-gradient-start) 0%, var(--brand-gradient-end) 100%);

  /* Focus & glow */
  --border-active: rgba(var(--brand-rgb), 0.45);
  --shadow-glow: 0 0 24px rgba(var(--brand-rgb), 0.28);
  --shadow-glow-sm: 0 0 12px rgba(var(--brand-rgb), 0.18);
  --focus-ring: 0 0 0 3px rgba(var(--brand-rgb), 0.22);

  /* Logo paths — theme variants */
  --brand-logo-light: url('../assets/brand/logo-rcs.png');
  --brand-logo-dark: url('../assets/brand/logo-qonsultan-rcs-dark.png');
  --brand-logo-url: var(--brand-logo-light);
  --brand-logo-path: assets/brand/logo-rcs.png;
  --brand-logo-path-dark: assets/brand/logo-qonsultan-rcs-dark.png;
}

/* ---- Brand utilities ---- */
.brand-gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.brand-gradient-bg {
  background: var(--brand-gradient);
}

/* Metric / highlight cards — 3px RCS accent (brand guidelines §5) */
.brand-accent-top {
  position: relative;
  overflow: hidden;
}

.brand-accent-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand-gradient);
}

.font-display {
  font-family: var(--font-display);
}

.brand-tm {
  font-size: 0.4em;
  vertical-align: super;
  line-height: 0;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.logo-rcs {
  display: inline-block;
  height: 36px;
  width: auto;
  object-fit: contain;
}

.logo-rcs--sm { height: 38px; max-width: 160px; }
.logo-rcs--lg { height: 48px; max-width: 200px; }
.logo-rcs--xl { height: 56px; max-width: 220px; }

.logo-rcs-plate {
  background: var(--brand-black);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}

.logo-rcs-on-dark {
  background: var(--brand-black);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}