/* ArtConnect — Design Tokens */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  /* Brand — user-specified */
  --navy:       #0B1C3F;
  --navy-deep:  #06101F;
  --navy-soft:  #14305C;
  --gold:       #C9A84C;
  --gold-soft:  #DFC06E;
  --terracotta: #B5532A;

  /* Light theme (default) — user-specified bg */
  --bg:               #F5F0EB;
  --surface:          #FFFFFF;
  --surface-2:        #EDE6DA;
  --ink:              #0B1C3F;
  --ink-soft:         #2C3A55;
  --muted:            #6B6759;
  --hairline:         #E0D8C8;
  --hairline-strong:  #C9BFAB;
  --accent:           var(--gold);
  --accent-ink:       #0B1C3F;
  --shadow-sm: 0 1px 2px rgba(11,28,63,.06), 0 2px 8px rgba(11,28,63,.04);
  --shadow-md: 0 8px 28px rgba(11,28,63,.08);
  --shadow-lg: 0 24px 60px rgba(11,28,63,.14);

  /* Typography */
  --serif: 'Newsreader', 'Source Serif 4', Georgia, serif;
  --sans:  'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --maxw:      1320px;
  --gutter:    clamp(20px, 4vw, 56px);
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 10px;

  /* Motion */
  --ease: cubic-bezier(.2,.6,.2,1);
}

[data-theme="dark"] {
  /* User-specified dark bg */
  --bg:              #07101f;
  --surface:         #0D2040;
  --surface-2:       #0B1C3F;
  --ink:             #F4ECDB;
  --ink-soft:        #D8D0BD;
  --muted:           #8A95AC;
  --hairline:        rgba(244,236,219,.10);
  --hairline-strong: rgba(244,236,219,.22);
  --accent:          var(--gold-soft);
  --accent-ink:      #07101f;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4),  0 2px 8px rgba(0,0,0,.25);
  --shadow-md: 0 12px 36px rgba(0,0,0,.5);
  --shadow-lg: 0 28px 70px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }

html {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.5;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}

body { background: var(--bg); color: var(--ink); min-height: 100vh; overflow-x: hidden; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

::selection { background: var(--accent); color: var(--accent-ink); }

/* Type utilities */
.serif  { font-family: var(--serif); font-weight: 400; }
.eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.h-display {
  font-family: var(--serif); font-weight: 400;
  letter-spacing: -.015em; line-height: 1.02;
  font-size: clamp(44px, 7vw, 92px);
}
.h-section {
  font-family: var(--serif); font-weight: 400;
  letter-spacing: -.01em; line-height: 1.05;
  font-size: clamp(32px, 4vw, 52px); margin: 0;
}
.h-card {
  font-family: var(--serif); font-weight: 400;
  font-size: 19px; line-height: 1.2; margin: 0;
}
.muted  { color: var(--muted); }
.italic { font-style: italic; }

/* Containers */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* Hairlines */
.hairline { background: var(--hairline); height: 1px; width: 100%; border: 0; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: var(--radius);
  border: 1px solid transparent; font-weight: 600;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  transition: all .25s var(--ease); cursor: pointer;
  background: transparent; white-space: nowrap;
}
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--navy-soft); transform: translateY(-1px); }
[data-theme="dark"] .btn-primary { background: var(--accent); color: var(--accent-ink); }
[data-theme="dark"] .btn-primary:hover { background: var(--gold); }

.btn-ghost { border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }

.btn-link { padding: 0; border: 0; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; }
.btn-link:hover { color: var(--accent); }

.btn-gold { background: var(--gold); color: #0B1C3F; border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-soft); }

/* Form inputs */
.input {
  appearance: none; background: var(--surface);
  border: 1px solid var(--hairline-strong); color: var(--ink);
  padding: 14px 16px; border-radius: var(--radius);
  font: inherit; width: 100%; outline: none;
  transition: border-color .2s var(--ease);
}
.input:focus { border-color: var(--ink); }

/* Horizontal scroll strip */
.scroll-x {
  display: flex; overflow-x: auto;
  scrollbar-width: none; scroll-snap-type: x mandatory;
}
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x > * { scroll-snap-align: start; flex: 0 0 auto; }

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Focus rings */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }