@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap');

:root {
  color-scheme: light;

  /* Brand colors sampled from the supplied Shashank Agency logo. */
  --color-primary: #e41346;
  --color-primary-hover: #c80f3d;
  --color-primary-active: #aa0a32;
  --color-on-primary: #ffffff;
  --color-secondary: #f75a74;
  --color-accent: #ffb496;

  /* Semantic colors remain distinct from the brand palette. */
  --color-success: #218c5a;
  --color-success-strong: #176b43;
  --color-warning: #d98200;
  --color-warning-strong: #765000;
  --color-error: #c62828;
  --color-error-strong: #9f1f1f;

  --color-background: #fffdfb;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-muted: #fff8f5;
  --color-surface-hover: #fff0f2;
  --color-surface-selected: #ffe8ed;
  --color-text: #151616;
  --color-text-soft: #443c3a;
  --color-text-muted: #6f6461;
  --color-border: #efd8cf;
  --color-border-strong: #dcbcaf;
  --color-brand-soft: #fff0f2;
  --color-secondary-soft: #fff0f3;
  --color-accent-soft: #fff1eb;
  --color-success-soft: #eaf7f0;
  --color-warning-soft: #fff4df;
  --color-error-soft: #fdecec;
  --color-overlay: rgba(21, 22, 22, 0.58);
  --color-focus-ring: rgba(228, 19, 70, 0.3);

  --font-heading: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display-size: clamp(2rem, 3vw, 3rem);
  --font-page-title-size: clamp(1.55rem, 2vw, 1.85rem);
  --font-section-title-size: 1.125rem;
  --font-body-size: 1rem;
  --font-caption-size: 0.8125rem;
  --line-height-tight: 1.2;
  --line-height-body: 1.55;

  --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;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.125rem;
  --radius-full: 999px;
  --shadow-subtle: 0 1px 2px rgba(21, 22, 22, 0.05), 0 6px 18px rgba(85, 44, 34, 0.05);
  --shadow-floating: 0 16px 44px rgba(85, 44, 34, 0.12);
  --shadow-overlay: 0 24px 70px rgba(21, 22, 22, 0.24);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font-body); background: var(--color-background); color: var(--color-text); }
body { color: var(--color-text); background: var(--color-background); font-family: var(--font-body); font-size: var(--font-body-size); line-height: var(--line-height-body); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: var(--line-height-tight); }
h1 { font-size: var(--font-display-size); }
h2 { font-size: var(--font-page-title-size); }
h3 { font-size: var(--font-section-title-size); }
p { text-wrap: pretty; }
a { color: var(--color-primary-active); text-underline-offset: 0.18em; }
a:hover { color: var(--color-primary-hover); }
::selection { color: var(--color-text); background: var(--color-accent); }
:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}