/* BASE: colours/theme variables (light + dark), reset, typography. Change brand colours here. */

:root{
  --bg:#f7f5f6; --bg2:#eee9ea; --surface:#ffffff; --border:#e8dfe1;
  --ink:#201418; --muted:#6b5c60; --navy:#201418; --maroon:#dc143c; --gold:#e8a925;
  --red:#dc143c; --red-deep:#9b1123; --red-deep2:#b1122e; --rose:#e02e53; --green:#1a7350;
  --accent:#dc143c; --accent-ink:#ffffff; --danger:#c0392b; --shadow:0 1px 2px rgba(32,20,24,.07);
  --shadow-lift:0 14px 28px -10px rgba(220,20,60,.25); --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15111c; --bg2:#1b1620; --surface:#211b27; --border:#332a35;
    --ink:#f6eef0; --muted:#ab9ca2; --accent:#ff4d6d; --accent-ink:#1a0d10; --navy:#f6eef0; --maroon:#ff4d6d; --gold:#e8b53c;
    --red:#ff4d6d; --red-deep:#5c0f1d; --red-deep2:#7a1024; --rose:#e02e53; --green:#3fc08a;
    --shadow-lift:0 14px 32px -10px rgba(255,77,109,.3);
  }
}
:root[data-theme="dark"]{
  --bg:#15111c; --bg2:#1b1620; --surface:#211b27; --border:#332a35;
  --ink:#f6eef0; --muted:#ab9ca2; --accent:#ff4d6d; --accent-ink:#1a0d10; --navy:#f6eef0; --maroon:#ff4d6d; --gold:#e8b53c;
  --red:#ff4d6d; --red-deep:#5c0f1d; --red-deep2:#7a1024; --rose:#e02e53; --green:#3fc08a;
  --shadow-lift:0 14px 32px -10px rgba(255,77,109,.3);
}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand{font-family:'Space Grotesk',system-ui,sans-serif}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
a{color:var(--accent);transition:color .15s}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--red);color:#fff}

:focus-visible{outline:2px solid var(--red);outline-offset:2px}
html{scroll-behavior:smooth}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--red) 35%, var(--border));border-radius:10px;border:2px solid var(--bg)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}