/*
 * ============================================================
 * BASE OVERRIDES — Shared across all pages
 * Loaded BEFORE each app's specific overrides.css.
 * Contains: theme vars, WebView fixes, scrollbar, reduced motion.
 * ============================================================
 */

/* ============================================================
   1. THEME — LIGHT MODE CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  --background:                 210 20% 98%;
  --foreground:                 222 47% 11%;
  --card:                       0   0% 100%;
  --card-foreground:            222 47% 11%;
  --primary:                    214 48% 33%;
  --primary-foreground:         210 40% 98%;
  --secondary:                  220 14% 96%;
  --secondary-foreground:       222 47% 11%;
  --muted:                      220 14% 96%;
  --muted-foreground:           220  9% 46%;
  --accent:                     220 14% 93%;
  --accent-foreground:          222 47% 11%;
  --border:                     220 13% 91%;
  --input:                      220 13% 88%;
  --color-background:           hsl(210, 20%, 98%);
  --color-foreground:           hsl(222, 47%, 11%);
  --color-card:                 hsl(0, 0%, 100%);
  --color-card-foreground:      hsl(222, 47%, 11%);
  --color-primary:              hsl(214, 48%, 33%);
  --color-primary-foreground:   hsl(210, 40%, 98%);
  --color-secondary:            hsl(220, 14%, 96%);
  --color-secondary-foreground: hsl(222, 47%, 11%);
  --color-muted:                hsl(220, 14%, 96%);
  --color-muted-foreground:     hsl(220, 9%, 46%);
  --color-accent:               hsl(220, 14%, 93%);
  --color-accent-foreground:    hsl(222, 47%, 11%);
  --color-border:               hsl(220, 13%, 91%);
  --color-input:                hsl(220, 13%, 88%);
}

/* ============================================================
   2. THEME — DARK MODE CSS CUSTOM PROPERTIES
   ============================================================ */
:root.dark {
  --background:                 30 18%  8%;
  --foreground:                 38 25% 88%;
  --card:                       30 18% 11%;
  --card-foreground:            38 25% 88%;
  --primary:                   210 60% 65%;
  --primary-foreground:         30 18% 10%;
  --secondary:                  30 14% 18%;
  --secondary-foreground:       38 25% 88%;
  --muted:                      30 14% 17%;
  --muted-foreground:           38 16% 66%;
  --accent:                     30 14% 18%;
  --accent-foreground:          38 25% 88%;
  --border:                     32 17% 23%;
  --input:                      32 17% 26%;
  --color-background:           hsl(30, 18%, 8%);
  --color-foreground:           hsl(38, 25%, 88%);
  --color-card:                 hsl(30, 18%, 11%);
  --color-card-foreground:      hsl(38, 25%, 88%);
  --color-primary:              hsl(210, 60%, 65%);
  --color-primary-foreground:   hsl(30, 18%, 10%);
  --color-border:               hsl(32, 17%, 23%);
  --color-input:                hsl(32, 17%, 26%);
  --color-muted:                hsl(30, 14%, 17%);
  --color-muted-foreground:     hsl(38, 16%, 66%);
  --color-secondary:            hsl(30, 14%, 18%);
  --color-secondary-foreground: hsl(38, 25%, 88%);
  --color-accent:               hsl(30, 14%, 18%);
  --color-accent-foreground:    hsl(38, 25%, 88%);
}

/* ============================================================
   3. COLOR-SCHEME + BODY BACKGROUND + FONT
   Hardcoded values bypass Samsung Internet var resolution bugs.
   ============================================================ */
:root:not(.dark) { color-scheme: light; }
:root.dark        { color-scheme: dark;  }

html {
  background-color: #f5f7fa;
}
html.dark {
  background-color: #1a1209;
}

:root:not(.dark) body {
  background-color: hsl(210, 20%, 98%) !important;
  color: hsl(222, 47%, 11%) !important;
}
:root.dark body {
  background-color: hsl(30, 18%, 8%) !important;
  color: hsl(38, 25%, 88%) !important;
}

html, body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   4. LINKEDIN / SAMSUNG WEBVIEW — SCROLL FIX
   ─────────────────────────────────────────────────────────────
   A. scroll-behavior: smooth → auto (kills SFSVC animation lock)
   B. overscroll-behavior-y: none (prevents CCT scroll chaining)
   C. Body bare (no overflow → no LinkedIn swipe-back detection)
   D. #root max-width:100vw + clip (prevents touchmove preventDefault)
   ============================================================ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: auto !important;
  overscroll-behavior-y: none;
  padding-top:   env(safe-area-inset-top, 0px);
  padding-left:  env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

body {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

#root {
  max-width: 100vw;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  #root { overflow-x: hidden; }
}

/* dvh with svh fallback for Samsung Internet ≤21 */
@supports (height: 100dvh) {
  .min-h-screen { min-height: 100dvh !important; }
}
@supports not (height: 100dvh) {
  @supports (height: 100svh) {
    .min-h-screen { min-height: 100svh !important; }
  }
}

/* ============================================================
   5. SCROLLBAR (6px, both themes)
   ============================================================ */
:root:not(.dark) ::-webkit-scrollbar { width: 6px; height: 6px; }
:root:not(.dark) ::-webkit-scrollbar-track { background: hsl(220, 14%, 96%); }
:root:not(.dark) ::-webkit-scrollbar-thumb { background: hsl(220, 13%, 80%); border-radius: 3px; }
:root:not(.dark) ::-webkit-scrollbar-thumb:hover { background: hsl(220, 9%, 62%); }

:root.dark ::-webkit-scrollbar { width: 6px; height: 6px; }
:root.dark ::-webkit-scrollbar-track { background: hsl(30, 14%, 6%); }
:root.dark ::-webkit-scrollbar-thumb { background: hsl(32, 17%, 23%); border-radius: 3px; }
:root.dark ::-webkit-scrollbar-thumb:hover { background: hsl(32, 17%, 32%); }

/* ============================================================
   6. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   7. MOBILE — SHARED PERFORMANCE (≤767px)
   ============================================================ */
@media (max-width: 767px) {
  /* Strip backdrop-blur — Samsung Internet GPU perf */
  [class*="backdrop-blur"],
  #portfolio-back-btn {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Tap highlight removal */
  a, button {
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Freeze decorative animations */
  .-z-10 * {
    animation: none !important;
  }
}

/* ============================================================
   8. TABLET — SHARED (768–1023px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  [class*="backdrop-blur"] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ============================================================
   9. DESKTOP — HEADING TRACKING (≥1024px)
   ============================================================ */
@media (min-width: 1024px) {
  h1, h2 { letter-spacing: -0.02em !important; }
}