/**
 * Razorglint Shell Theme - Style Overrides
 * Loads AFTER Vite-built CSS to apply CTLM brand polish
 */

:root {
  /* CTLM Brand Colors */
  --ctlm-bg: #f4f5f7;
  --ctlm-bg-subtle: #f8f9fa;
  --ctlm-accent: #6d28d9;          /* Purple 600 */
  --ctlm-accent-light: #7c3aed;    /* Purple 500 */
  --ctlm-accent-muted: rgba(109, 40, 217, 0.08);
  --ctlm-border: rgba(109, 40, 217, 0.18);
  --ctlm-border-hover: rgba(109, 40, 217, 0.32);
  --ctlm-focus-ring: rgba(109, 40, 217, 0.4);
}

/* ========================================
   BACKGROUND
   ======================================== */

body {
  background-color: var(--ctlm-bg);
}

/* Subtle texture overlay (optional - uncomment if texture asset added) */
/*
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('./assets/texture.png');
  background-repeat: repeat;
  opacity: 0.03;
  pointer-events: none;
  z-index: -1;
}
*/

/* ========================================
   SECTION SPACING (tighter)
   ======================================== */

.section {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

@media (min-width: 768px) {
  .section {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
  }
}

/* Hero sections keep more breathing room */
.section:first-of-type {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}

@media (min-width: 768px) {
  .section:first-of-type {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}

/* ========================================
   CARD BORDERS - Purple Tint
   ======================================== */

/* Cards with border */
[class*="border-border"] {
  border-color: var(--ctlm-border) !important;
}

/* Card hover states */
[class*="hover\\:border-border"]:hover {
  border-color: var(--ctlm-border-hover) !important;
}

/* ========================================
   BUTTONS - Focus States
   ======================================== */

/* Primary button focus */
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--ctlm-accent);
  outline-offset: 2px;
}

/* Ghost/secondary button hover - subtle purple tint */
button[class*="ghost"]:hover,
button[class*="variant-ghost"]:hover {
  background-color: var(--ctlm-accent-muted) !important;
}

/* ========================================
   ICONS - Accent Color (selective)
   ======================================== */

/* Section header overlines - subtle purple */
[class*="tracking-\\[0\\.25em\\]"] {
  color: var(--ctlm-accent) !important;
  opacity: 0.7;
}

/* Proof card icons - purple tint */
.text-foreground\\/60[class*="duotone"] {
  color: var(--ctlm-accent-light) !important;
  opacity: 0.6;
}

/* ========================================
   HEADER - Subtle enhancement
   ======================================== */

header {
  background-color: rgba(248, 249, 250, 0.97) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ========================================
   FOOTER
   ======================================== */

footer {
  background-color: var(--ctlm-bg-subtle);
  border-top-color: var(--ctlm-border) !important;
}

/* ========================================
   FORM INPUTS - Focus States
   ======================================== */

input:focus,
textarea:focus,
select:focus,
[class*="SelectTrigger"]:focus {
  border-color: var(--ctlm-accent) !important;
  box-shadow: 0 0 0 3px var(--ctlm-focus-ring) !important;
  outline: none;
}

/* ========================================
   DARK MODE PRESERVATION
   ======================================== */

.dark {
  --ctlm-bg: #0f0f11;
  --ctlm-bg-subtle: #18181b;
  --ctlm-accent-muted: rgba(139, 92, 246, 0.12);
  --ctlm-border: rgba(139, 92, 246, 0.22);
  --ctlm-border-hover: rgba(139, 92, 246, 0.38);
}

.dark body {
  background-color: var(--ctlm-bg);
}

.dark header {
  background-color: rgba(15, 15, 17, 0.97) !important;
}

/* ========================================
   TV MODE - Preserved
   ======================================== */

html.tv .section {
  padding-top: 6rem;
  padding-bottom: 6rem;
}