/* Art direction: Cost segregation engineering firm → Authoritative, financial services
   Palette: Deep navy (#0B1D3A) primary surface (dark), warm off-white (#FAFAF8) light surface, gold accent (#C5A55A)
   Typography: Cormorant (display serif, authority/elegance) + Plus Jakarta Sans (body, modern/clean)
   Density: Spacious — generous whitespace, editorial landing page feel */

/* ============================================================
   TYPE SCALE
   ============================================================ */
:root {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    8rem);

  /* SPACING — 4px base */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* RADIUS */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* TRANSITIONS */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* CONTENT WIDTHS */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
  --content-full: 100%;

  /* FONTS */
  --font-display: 'Cormorant', 'Georgia', serif;
  --font-body: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
}

/* ============================================================
   LIGHT MODE — Warm off-white with navy accents, gold CTA
   ============================================================ */
:root, [data-theme="light"] {
  /* Surfaces */
  --color-bg:               #FAFAF8;
  --color-surface:          #F5F4F0;
  --color-surface-2:        #EEEDEA;
  --color-surface-offset:   #E7E6E2;
  --color-surface-offset-2: #DDDCD8;
  --color-surface-dynamic:  #D3D2CE;
  --color-divider:          #D0CFC8;
  --color-border:           #C2C1BA;

  /* Text */
  --color-text:           #1A1A1A;
  --color-text-muted:     #5C5C58;
  --color-text-faint:     #9A9A94;
  --color-text-inverse:   #FAFAF8;

  /* Primary — Deep Navy */
  --color-primary:          #0B1D3A;
  --color-primary-hover:    #162D52;
  --color-primary-active:   #0A1528;
  --color-primary-highlight: #D6DCE6;

  /* Accent — Gold */
  --color-accent:           #C5A55A;
  --color-accent-hover:     #B8953F;
  --color-accent-active:    #A88530;
  --color-accent-text:      #1A1A1A;

  /* Semantic */
  --color-success:        #437a22;
  --color-success-highlight: #d4dfcc;
  --color-error:          #a13544;
  --color-error-highlight: #dececb;
  --color-warning:        #964219;

  /* Shadows (warm-tinted) */
  --shadow-sm: 0 1px 2px oklch(0.2 0.01 80 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.2 0.01 80 / 0.08);
  --shadow-lg: 0 12px 32px oklch(0.2 0.01 80 / 0.12);
}

/* ============================================================
   DARK MODE — Deep navy surface, warm text, gold accent
   ============================================================ */
[data-theme="dark"] {
  /* Surfaces — Deep navy progression */
  --color-bg:               #070E1A;
  --color-surface:          #0B1525;
  --color-surface-2:        #0F1C30;
  --color-surface-offset:   #132238;
  --color-surface-offset-2: #1A2D4A;
  --color-surface-dynamic:  #243A5A;
  --color-divider:          #1E2E4A;
  --color-border:           #2A3E5E;

  /* Text */
  --color-text:           #E8E6E0;
  --color-text-muted:     #9CA3B0;
  --color-text-faint:     #5A6478;
  --color-text-inverse:   #0B1D3A;

  /* Primary — Lighter navy for interactive elements */
  --color-primary:          #C5A55A;
  --color-primary-hover:    #D4B76E;
  --color-primary-active:   #B8953F;
  --color-primary-highlight: #1E2A3E;

  /* Accent — Gold stays similar */
  --color-accent:           #C5A55A;
  --color-accent-hover:     #D4B76E;
  --color-accent-active:    #B8953F;
  --color-accent-text:      #0B1D3A;

  /* Semantic */
  --color-success:        #6daa45;
  --color-success-highlight: #1a2a15;
  --color-error:          #dd6974;
  --color-error-highlight: #2a1518;
  --color-warning:        #bb653b;

  /* Shadows */
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.25);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.35);
  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.5);
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:               #070E1A;
    --color-surface:          #0B1525;
    --color-surface-2:        #0F1C30;
    --color-surface-offset:   #132238;
    --color-surface-offset-2: #1A2D4A;
    --color-surface-dynamic:  #243A5A;
    --color-divider:          #1E2E4A;
    --color-border:           #2A3E5E;
    --color-text:           #E8E6E0;
    --color-text-muted:     #9CA3B0;
    --color-text-faint:     #5A6478;
    --color-text-inverse:   #0B1D3A;
    --color-primary:          #C5A55A;
    --color-primary-hover:    #D4B76E;
    --color-primary-active:   #B8953F;
    --color-primary-highlight: #1E2A3E;
    --color-accent:           #C5A55A;
    --color-accent-hover:     #D4B76E;
    --color-accent-active:    #B8953F;
    --color-accent-text:      #0B1D3A;
    --color-success:        #6daa45;
    --color-success-highlight: #1a2a15;
    --color-error:          #dd6974;
    --color-error-highlight: #2a1518;
    --color-warning:        #bb653b;
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.25);
    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.35);
    --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.5);
  }
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); letter-spacing: -0.01em; }
h3 { font-size: var(--text-xl); }

/* ============================================================
   SCROLL ANIMATIONS (CSS-only, no layout shift)
   ============================================================ */
.fade-in {
  opacity: 1;
}

@supports (animation-timeline: scroll()) {
  .fade-in {
    opacity: 0;
    animation: reveal-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
}

@keyframes reveal-fade {
  to { opacity: 1; }
}

.reveal-up {
  opacity: 1;
}

@supports (animation-timeline: scroll()) {
  .reveal-up {
    clip-path: inset(100% 0 0 0);
    opacity: 0;
    animation: reveal-clip linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
}

@keyframes reveal-clip {
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}