/* ═══════════════════════════════════════════════════════════════
   Clevertech Unified Theme Override for DLS Magician
   Replaces tan/beige + Fraunces with Clevertech purple/white + Inter
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root, :host {
  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Color overrides */
  --color-background: #fdfbff;
  --color-foreground: #1a1135;
  --color-muted-foreground: #5c4a6e;
  --color-border: rgba(113, 74, 139, 0.15);
  --color-destructive: #dc2626;
  --color-destructive-foreground: #fff;
  --color-success: #16a34a;
  --color-warning: #ca8a04;

  /* Clevertech brand tokens */
  --ct-primary: #714a8b;
  --ct-primary-light: #a57bc2;
  --ct-primary-dark: #4a2c5f;
  --ct-secondary: #ffce5c;
  --ct-tertiary: #20d6c7;
  --ct-bg: #fdfbff;
  --ct-surface: #ffffff;
  --ct-alt-bg: #f3eff7;
}

/* ─── Base ─── */
html {
  background: radial-gradient(circle at 0 0, rgba(243, 239, 247, 0.8), transparent 40%),
              radial-gradient(circle at 100% 0, rgba(32, 214, 199, 0.06), transparent 30%),
              linear-gradient(#fdfbff, #f3eff7 50%, #fdfbff) !important;
}

body {
  background-color: var(--color-background) !important;
  color: var(--color-foreground) !important;
  font-family: var(--font-sans) !important;
}

/* ─── Remove old Fraunces import visual traces ─── */

/* ─── Hero section gradient text ─── */
.bg-gradient-to-r {
  --tw-gradient-from: var(--ct-primary) !important;
  --tw-gradient-to: var(--ct-tertiary) !important;
}

/* ─── Warm background overrides → Purple palette ─── */
.bg-\[\#f7f1e8\],
.bg-\[\#f8f3ea\],
.bg-\[\#fbf7ef\],
.bg-\[\#fcf8f1\],
.bg-\[\#fffaf3\],
.bg-\[\#fff6ea\],
.bg-\[\#f3eadc\],
.bg-\[\#f2e8da\],
.bg-\[\#efe3cf\],
.bg-\[\#efe4d1\],
.bg-\[\#efe5d7\]\/90,
.bg-\[\#f6ecdc\],
.bg-\[\#f0ddc5\] {
  background-color: var(--ct-alt-bg) !important;
}

/* ─── Tan accent backgrounds → Purple tints ─── */
.bg-\[\#c96f4a\]\/10,
.bg-\[\#c96f4a\]\/12,
.bg-\[\#c96f4a\]\/18,
.bg-\[\#d3b27a\]\/18 {
  background-color: rgba(113, 74, 139, 0.1) !important;
}

/* ─── Tan/green CTA backgrounds → Purple ─── */
.bg-\[\#3b7f6f\] {
  background-color: var(--ct-primary) !important;
}

.bg-\[\#9a4f31\] {
  background-color: var(--ct-primary-dark) !important;
}

/* ─── Teal accent bg → Clevertech Teal ─── */
.bg-\[\#3b7f6f\]\/10,
.bg-\[\#3b7f6f\]\/12,
.bg-\[\#3b7f6f\]\/14 {
  background-color: rgba(32, 214, 199, 0.1) !important;
}

.bg-\[\#dce9e5\] {
  background-color: rgba(32, 214, 199, 0.12) !important;
}

/* ─── Text color overrides ─── */
.text-\[\#3b7f6f\] {
  color: var(--ct-primary) !important;
}

.text-\[\#9a4f31\] {
  color: var(--ct-primary-dark) !important;
}

.text-\[\#8a6731\] {
  color: var(--ct-primary) !important;
}

.text-\[\#24463c\] {
  color: var(--ct-primary-dark) !important;
}

/* ─── Dark green hero/feature → Deep Violet ─── */
.bg-\[linear-gradient\(135deg\,\#2e4c42_0\%\,\#355a4e_45\%\,\#49685b_100\%\)\] {
  background-image: linear-gradient(135deg, #4a2c5f 0%, #5b3873 45%, #714a8b 100%) !important;
}

/* ─── Border overrides ─── */
.border-\[\#d1b896\]\/40,
.border-\[\#d5c2a7\]\/60,
.border-\[\#d7c3a7\]\/60,
.border-\[\#7d6749\]\/30 {
  border-color: rgba(113, 74, 139, 0.2) !important;
}

/* ─── Paper panel → Clevertech surface ─── */
.paper-panel {
  background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(243, 239, 247, 0.96)) !important;
  border: 1px solid rgba(113, 74, 139, 0.12) !important;
  box-shadow: 0 24px 60px rgba(74, 44, 95, 0.08) !important;
}

/* ─── Terrain wash → Clevertech radial ─── */
.terrain-wash {
  background: radial-gradient(circle at 10% 0, rgba(113, 74, 139, 0.08), transparent 26%),
              radial-gradient(circle at 100% 10%, rgba(32, 214, 199, 0.06), transparent 22%),
              linear-gradient(rgba(253, 251, 255, 0.7), rgba(243, 239, 247, 0.78)) !important;
}

/* ─── Industry cards ─── */
.industry-card {
  border-top: 4px solid var(--ct-primary) !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border: 1px solid rgba(113, 74, 139, 0.08);
  border-top: 4px solid var(--ct-primary) !important;
}

.industry-card:nth-child(3n+1) {
  border-top-color: var(--ct-primary) !important;
}

.industry-card:nth-child(3n+2) {
  border-top-color: var(--ct-tertiary) !important;
}

.industry-card:nth-child(3n+3) {
  border-top-color: var(--ct-secondary) !important;
}

.industry-card--oil,
.industry-card--telecom,
.industry-card--survey,
.industry-card--construction,
.industry-card--ag,
.industry-card--gov {
  background: var(--ct-surface) !important;
}

.industry-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(113, 74, 139, 0.12) !important;
}

/* ─── Shadow overrides ─── */
.shadow-\[0_12px_35px_rgba\(110\,86\,58\,0\.08\)\] {
  --tw-shadow: 0 12px 35px rgba(74, 44, 95, 0.08) !important;
}

.shadow-\[0_24px_65px_rgba\(88\,66\,43\,0\.16\)\] {
  --tw-shadow: 0 24px 65px rgba(74, 44, 95, 0.1) !important;
}

.shadow-\[0_14px_32px_rgba\(88\,66\,43\,0\.1\)\] {
  --tw-shadow: 0 14px 32px rgba(74, 44, 95, 0.08) !important;
}

.shadow-\[0_16px_35px_rgba\(36\,28\,21\,0\.18\)\] {
  --tw-shadow: 0 16px 35px rgba(74, 44, 95, 0.12) !important;
}

.shadow-\[0_18px_45px_rgba\(36\,28\,21\,0\.18\)\] {
  --tw-shadow: 0 18px 45px rgba(74, 44, 95, 0.12) !important;
}

/* ─── Icon containers ─── */
.icon-bg-primary {
  background-color: rgba(113, 74, 139, 0.1) !important;
  color: var(--ct-primary) !important;
}

/* ─── Buttons: green → primary, terracotta → primary-dark ─── */
.shadow-\[0_16px_35px_rgba\(59\,127\,111\,0\.2\)\] {
  --tw-shadow: 0 16px 35px rgba(113, 74, 139, 0.2) !important;
}

.shadow-\[0_16px_35px_rgba\(154\,79\,49\,0\.2\)\] {
  --tw-shadow: 0 16px 35px rgba(74, 44, 95, 0.2) !important;
}

.shadow-\[0_20px_40px_rgba\(15\,34\,28\,0\.18\)\] {
  --tw-shadow: 0 20px 40px rgba(74, 44, 95, 0.14) !important;
}

/* ─── Step badge: warm tan → purple tint ─── */
.bg-\[\#efe7d8\],
[class*="bg-"][class*="efe7"] {
  background-color: rgba(165, 123, 194, 0.15) !important;
  color: var(--ct-primary-dark) !important;
}

/* ─── Dark mode adjustments ─── */
html.dark {
  --color-background: #0f1117;
  --color-foreground: #e4e4e7;
  --color-muted-foreground: #a1a1aa;
  --color-border: rgba(165, 123, 194, 0.12);
}

html.dark,
html.dark body {
  background-color: #0f1117 !important;
}

html.dark .paper-panel {
  background: linear-gradient(rgba(26, 27, 35, 0.92), rgba(30, 32, 42, 0.96)) !important;
  border-color: rgba(165, 123, 194, 0.12) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45) !important;
}

html.dark .terrain-wash {
  background: radial-gradient(circle at 10% 0, rgba(165, 123, 194, 0.1), transparent 26%),
              radial-gradient(circle at 100% 10%, rgba(45, 212, 191, 0.08), transparent 22%),
              linear-gradient(rgba(15, 17, 23, 0.7), rgba(20, 22, 30, 0.78)) !important;
}

html.dark .industry-card--oil,
html.dark .industry-card--telecom,
html.dark .industry-card--survey,
html.dark .industry-card--construction,
html.dark .industry-card--ag,
html.dark .industry-card--gov {
  background: #1a1b23 !important;
}

/* ─── Link color: teal → primary ─── */
a:not([class]) {
  color: var(--ct-primary);
}

a:not([class]):hover {
  color: var(--ct-primary-light);
}