/* =============================================
   BASE.CSS — Foundation: Reset, Typography, 5 Dual-Tone Palettes
   ============================================= */

/* --- CSS Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* --- Typography — Premium feel --- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=DM+Serif+Display&family=Instrument+Serif:ital@0;1&display=swap');

body {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4 {
  font-family: 'Instrument Serif', 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin-bottom: 1rem; }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* =============================================
   5 DUAL-TONE PALETTES
   Each has a MAIN color + premium SECONDARY accent
   ============================================= */

/* DEFAULT: Sukoon Teal + Cyan */
:root {
  --main: #13443e;
  --main-light: #c8e6e0;
  --main-dark: #0b2e2a;
  --main-glow: rgba(19, 68, 62, 0.08);

  --secondary: #03b2cb;
  --secondary-light: #d0f2f8;
  --secondary-glow: rgba(3, 178, 203, 0.10);

  --bg: #f8fbfa;
  --bg-alt: #edf5f3;
  --bg-gradient: linear-gradient(160deg, #f8fbfa 0%, #edf5f3 40%, #e8f4f0 70%, #f8fbfa 100%);

  --surface: #FFFFFF;
  --surface-hover: #f2f8f6;
  --surface-border: rgba(19, 68, 62, 0.08);
  --surface-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.03);
  --surface-shadow-hover: 0 4px 12px rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.06);

  --text: #1A1A2E;
  --text-secondary: #4A5568;
  --text-muted: #8B95A5;
  --text-on-main: #FFFFFF;

  --border: #d4e5dc;
  --border-strong: #b0cfc0;
  --ring: rgba(19, 68, 62, 0.20);

  --success: #38A169;
  --warning: #D69E2E;
  --danger: #E53E3E;
  --info: #03b2cb;

  --radius: 14px;
  --radius-lg: 22px;
  --radius-full: 9999px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --header-height: 72px;
}

body {
  color: var(--text);
  background: var(--bg-gradient);
  background-attachment: fixed;
}

/* 0. Sukoon Teal + Cyan (DEFAULT) */
body.palette-sukoon {
  --main: #13443e;
  --main-light: #c8e6e0;
  --main-dark: #0b2e2a;
  --main-glow: rgba(19, 68, 62, 0.08);
  --secondary: #03b2cb;
  --secondary-light: #d0f2f8;
  --secondary-glow: rgba(3, 178, 203, 0.10);
  --bg: #f8fbfa;
  --bg-alt: #edf5f3;
  --bg-gradient: linear-gradient(160deg, #f8fbfa 0%, #edf5f3 40%, #e8f4f0 70%, #f8fbfa 100%);
  --surface-hover: #f2f8f6;
  --surface-border: rgba(19, 68, 62, 0.08);
  --border: #d4e5dc;
  --border-strong: #b0cfc0;
  --ring: rgba(19, 68, 62, 0.20);
}

/* 1. Ocean Blue + Warm Gold */
body.palette-blue {
  --main: #1B4D7A;
  --main-light: #D0E4F5;
  --main-dark: #0F3050;
  --main-glow: rgba(27, 77, 122, 0.08);
  --secondary: #C4975A;
  --secondary-light: #F5E6D0;
  --secondary-glow: rgba(196, 151, 90, 0.10);
  --bg: #FAFCFE;
  --bg-alt: #EFF5FB;
  --bg-gradient: linear-gradient(160deg, #FAFCFE 0%, #EFF5FB 40%, #F5F0E8 70%, #FAFCFE 100%);
  --surface-hover: #F5F9FD;
  --surface-border: rgba(27, 77, 122, 0.08);
  --border: #E2E8F0;
  --border-strong: #CBD5E0;
  --ring: rgba(27, 77, 122, 0.20);
}

/* 2. Forest Green + Rose Gold */
body.palette-green {
  --main: #1B6B4A;
  --main-light: #C8E6D8;
  --main-dark: #0E4530;
  --main-glow: rgba(27, 107, 74, 0.08);
  --secondary: #B87D6B;
  --secondary-light: #F2DDD5;
  --secondary-glow: rgba(184, 125, 107, 0.10);
  --bg: #F8FBF9;
  --bg-alt: #EDF5F0;
  --bg-gradient: linear-gradient(160deg, #F8FBF9 0%, #EDF5F0 40%, #F5EDE8 70%, #F8FBF9 100%);
  --surface-hover: #F2F8F5;
  --surface-border: rgba(27, 107, 74, 0.08);
  --border: #D4E5DC;
  --border-strong: #B0CFC0;
  --ring: rgba(27, 107, 74, 0.20);
}

/* 3. Saffron Gold + Deep Charcoal */
body.palette-yellow {
  --main: #A67C2E;
  --main-light: #F5E6C0;
  --main-dark: #7A5A1A;
  --main-glow: rgba(166, 124, 46, 0.08);
  --secondary: #3D3D3D;
  --secondary-light: #E8E8E8;
  --secondary-glow: rgba(61, 61, 61, 0.08);
  --bg: #FDFCF8;
  --bg-alt: #F8F3E8;
  --bg-gradient: linear-gradient(160deg, #FDFCF8 0%, #F8F3E8 40%, #F0ECE0 70%, #FDFCF8 100%);
  --surface-hover: #FBF8F2;
  --surface-border: rgba(166, 124, 46, 0.08);
  --border: #E8E0D0;
  --border-strong: #D4C8B0;
  --ring: rgba(166, 124, 46, 0.20);
}

/* 4. Burgundy Red + Slate Blue */
body.palette-red {
  --main: #8B2D42;
  --main-light: #F0D0D8;
  --main-dark: #5E1A2B;
  --main-glow: rgba(139, 45, 66, 0.08);
  --secondary: #5A6B80;
  --secondary-light: #D8E0E8;
  --secondary-glow: rgba(90, 107, 128, 0.08);
  --bg: #FDFAFA;
  --bg-alt: #F5EDED;
  --bg-gradient: linear-gradient(160deg, #FDFAFA 0%, #F5EDED 40%, #EDE8F0 70%, #FDFAFA 100%);
  --surface-hover: #FAF5F6;
  --surface-border: rgba(139, 45, 66, 0.08);
  --border: #E8D8DC;
  --border-strong: #D4C0C8;
  --ring: rgba(139, 45, 66, 0.20);
}

/* 5. Royal Purple + Champagne */
body.palette-purple {
  --main: #5B3A8C;
  --main-light: #DDD0F0;
  --main-dark: #3D2560;
  --main-glow: rgba(91, 58, 140, 0.08);
  --secondary: #C4A86A;
  --secondary-light: #F5EDD5;
  --secondary-glow: rgba(196, 168, 106, 0.10);
  --bg: #FBFAFE;
  --bg-alt: #F2EEFA;
  --bg-gradient: linear-gradient(160deg, #FBFAFE 0%, #F2EEFA 40%, #F5F0E5 70%, #FBFAFE 100%);
  --surface-hover: #F7F4FC;
  --surface-border: rgba(91, 58, 140, 0.08);
  --border: #DDD4E8;
  --border-strong: #C8BCD8;
  --ring: rgba(91, 58, 140, 0.20);
}

/* --- Base Element Styles --- */
::selection {
  background: var(--main-light);
  color: var(--main-dark);
}

a:hover { color: var(--main); }

input, textarea, select {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--main);
  box-shadow: 0 0 0 3px var(--ring);
}
textarea { min-height: 120px; resize: vertical; }
label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }

/* --- Utility Classes --- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.text-muted { color: var(--text-secondary); }