/* ==========================================================================
   CraftEgon Corporate Compliance Services (CCS)
   File: assets/css/theme.css
   Description: Institutional Legal-Tech & Corporate Secretarial Master Stylesheet
   ========================================================================== */

/* ------------------------------------------------------------------------
   1. MODULAR COMPONENT IMPORTS
   (Must strictly remain at the very top of the file)
   ------------------------------------------------------------------------ */
@import url('./tokens.css');
@import url('./navbar.css');
@import url('./service-page.css');

/* ------------------------------------------------------------------------
   2. DESIGN TOKENS & CSS VARIABLES
   ------------------------------------------------------------------------ */
:root {
  /* Brand Gold Palette */
  --color-gold-primary: #c59b27;
  --color-gold-light: #fef3c7;
  --color-gold-hover: #a17d1a;
  --color-gold-dark: #785b0d;

  /* Neutrals & Light Backgrounds */
  --color-ivory-base: #fcfbf7;
  --color-pearl-surface: #f8fafc;
  --color-charcoal-primary: #090d16;
  --color-slate-text: #334155;
  --color-slate-muted: #475569;

  /* Borders & Dividers */
  --color-border-subtle: #e2e8f0;
  --color-border-gold: rgba(197, 155, 39, 0.35);

  /* Functional Status Colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #3b82f6;

  /* Typography Stack */
  --font-family-base: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-heading: 'Cinzel', Georgia, serif;
  --font-family-mono: 'DM Mono', monospace;

  /* Font Scaling System */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-md: 1rem;        /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */
  --font-size-4xl: 2.25rem;    /* 36px */
  --font-size-5xl: 3rem;       /* 48px */

  /* Spacing System */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  /* Elevational Shadows & Glows */
  --shadow-gold-card: 0 10px 30px -5px rgba(197, 155, 39, 0.15);
  --shadow-silver-card: 0 4px 18px rgba(15, 23, 42, 0.05);
  --shadow-focus-gold: 0 0 0 3px rgba(197, 155, 39, 0.25);

  /* Transitions & Animations */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 350ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout Constraints */
  --container-max-width: 1280px;
  --header-height: 80px;
}

/* ------------------------------------------------------------------------
   3. GLOBAL RESET & BASE STYLES
   ------------------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--color-ivory-base);
  color: var(--color-charcoal-primary);
  font-family: var(--font-family-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  line-height: 1.6;
  background-color: var(--color-ivory-base);
  color: var(--color-charcoal-primary);
  overflow-x: hidden;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  color: var(--color-charcoal-primary);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }

p {
  margin-bottom: var(--space-4);
  color: var(--color-slate-text);
}

a {
  color: var(--color-gold-dark);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-gold-primary);
}

/* Custom Text Selection */
::selection {
  background-color: var(--color-gold-light);
  color: var(--color-gold-dark);
}

/* ------------------------------------------------------------------------
   4. COMMON LAYOUT & UTILITY CLASSES
   ------------------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.d-none {
  display: none !important;
}

/* Radial Grid Pattern Background */
.grid-bg-light {
  background-image: radial-gradient(rgba(100, 116, 139, 0.18) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Glassmorphism Header */
.glass-nav {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Metallic Gold Gradient Text */
.gold-gradient-text,
.text-gold-gradient {
  background: linear-gradient(135deg, #785b0d 0%, #c59b27 50%, #d4af37 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Service & Retainer Card Transitions */
.card-transition {
  transition: all var(--transition-normal);
}

.card-transition:hover {
  transform: translateY(-3px);
  border-color: var(--color-gold-primary);
  box-shadow: 0 12px 30px -5px rgba(197, 155, 39, 0.16);
}

/* Form Sync Ring Highlight */
#formContainer {
  transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}

/* ------------------------------------------------------------------------
   5. BUTTONS & UI COMPONENT PATTERNS
   ------------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-sm);
  font-weight: 700;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  border: 1px solid transparent;
  gap: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-gold {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #ca8a04 100%);
  color: #ffffff;
}

.btn-gold:hover {
  filter: brightness(1.08);
  box-shadow: var(--shadow-gold-card);
}

.btn-outline-gold {
  background-color: transparent;
  border-color: var(--color-border-subtle);
  color: var(--color-charcoal-primary);
}

.btn-outline-gold:hover {
  border-color: var(--color-gold-primary);
  color: var(--color-gold-dark);
}

/* ------------------------------------------------------------------------
   6. AEO DIRECT ANSWER SUMMARY BOX COMPONENT PATTERN
   ------------------------------------------------------------------------ */
.aeo-summary-box {
  background-color: #ffffff;
  border-left: 4px solid var(--color-gold-primary);
  border-top: 1px solid var(--color-border-subtle);
  border-right: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  margin-top: var(--space-4);
  margin-bottom: var(--space-8);
  font-size: var(--font-size-md);
  color: var(--color-charcoal-primary);
  box-shadow: var(--shadow-silver-card);
}

.aeo-summary-box strong {
  color: var(--color-gold-dark);
}

/* Custom Scrollbar Styles */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold-primary);
}