/* Meant brand tokens. The one source of truth for colour, type, space, radius and motion.
   Every page (site, app, brand guide, ads) imports this file.
   Palette "Night & Champagne": aubergine night, plum, orchid and champagne. */

/* Fonts are loaded with <link> in each page head: Figtree (UI) + Instrument Serif (display). */

:root {
  /* Colour */
  --paper: #FAF8F7;          /* page background, never pure white */
  --card: #FFFFFF;           /* raised surfaces */
  --surface: #F3F0F4;        /* inputs, chips, grouped areas */
  --surface-2: #E9E4EC;      /* pressed / tracks */
  --hairline: rgba(23, 18, 30, 0.09);
  --ink: #17121E;            /* primary text, aubergine black */
  --ink-2: #4A4453;          /* secondary text, 9:1 */
  --muted: #6C6575;          /* captions, 5.3:1 */
  --brand: #5A2D82;          /* primary buttons and active states (plum). White text 9.9:1 */
  --on-brand: #FFFFFF;
  --brand-ink: #5A2D82;      /* brand-coloured text */
  --brand-soft: #F0E9F7;     /* tints behind brand text */
  --accent: #9A5BD3;         /* orchid: the logo dot, hearts, highlights. Icons and large text only */
  --champagne: #E6C79C;      /* perfect picks, stars, premium moments */
  --champagne-ink: #8C6A38;  /* champagne as text on light, 4.7:1 */
  --champagne-soft: #F7EFE3;
  --night: #100C16;          /* zodiac, matches, reveals */
  --night-2: #1A1422;
  --on-dark: #F5F1F7;
  --on-dark-2: rgba(245, 241, 247, 0.7);
  --glow-1: rgba(154, 91, 211, 0.24);   /* orchid light */
  --glow-2: rgba(230, 199, 156, 0.22);  /* champagne light */
  --success: #2F8F5B;
  --danger: #C2364B;

  /* Type */
  --font-sans: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --t-hero: clamp(3.25rem, 7.6vw, 7rem);
  --t-display: clamp(2.5rem, 5.6vw, 4.5rem);
  --t-large: 2.125rem;     /* 34 */
  --t-title: 1.5rem;       /* 24 */
  --t-section: 1.25rem;    /* 20 */
  --t-headline: 1.0625rem; /* 17 */
  --t-body: 0.9375rem;     /* 15 */
  --t-sub: 0.875rem;       /* 14 */
  --t-caption: 0.8125rem;  /* 13 */
  --t-micro: 0.75rem;      /* 12 */

  /* Space: 4pt grid */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;
  /* Rhythm: every page uses these, so gaps repeat exactly */
  --gutter: clamp(20px, 5vw, 80px);
  --section-y: clamp(88px, 11vw, 144px);  /* top and bottom of each section */
  --head-gap: clamp(40px, 5vw, 64px);     /* section heading -> its content */
  --stack: var(--s-5);                    /* title -> paragraph */
  --block: var(--s-8);                    /* between blocks inside a section */
  --card-pad: var(--s-6);                 /* inside every card */
  --max: 1200px;

  /* Radius: restrained, one family */
  --r-xs: 8px;    /* small chips inside cards */
  --r-sm: 12px;   /* inputs, tiles */
  --r-md: 14px;   /* list groups, small cards */
  --r-lg: 16px;   /* cards */
  --r-xl: 22px;   /* photo cards, sheets, panels */
  --r-pill: 999px;

  /* Depth: ultra-diffuse only */
  --shadow-1: 0 1px 2px rgba(23, 18, 30, 0.04), 0 8px 24px rgba(23, 18, 30, 0.06);
  --shadow-2: 0 2px 6px rgba(23, 18, 30, 0.05), 0 24px 64px rgba(23, 18, 30, 0.12);
  --shadow-brand: 0 12px 32px rgba(90, 45, 130, 0.28);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-screen: cubic-bezier(.32, .72, 0, 1);
  --ease-spring: cubic-bezier(.34, 1.45, .64, 1);
  --dur-press: 80ms;
  --dur-exit: 200ms;
  --dur-enter: 450ms;
}

/* Dark: same tokens, night values. Champagne becomes the primary. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0F0B14; --card: #18131F; --surface: #211B29; --surface-2: #2B2434;
    --hairline: rgba(245, 241, 247, 0.09);
    --ink: #F5F1F7; --ink-2: #CFC7D6; --muted: #A79FAF;
    --brand: #E6C79C; --on-brand: #17121E; --brand-ink: #D9B6F2; --brand-soft: rgba(154, 91, 211, 0.18);
    --accent: #C39BEB; --champagne-ink: #E6C79C; --champagne-soft: rgba(230, 199, 156, 0.14);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.3), 0 24px 64px rgba(0, 0, 0, 0.5);
    --shadow-brand: 0 12px 32px rgba(230, 199, 156, 0.18);
  }
}
:root[data-theme="dark"] {
  --paper: #0F0B14; --card: #18131F; --surface: #211B29; --surface-2: #2B2434;
  --hairline: rgba(245, 241, 247, 0.09);
  --ink: #F5F1F7; --ink-2: #CFC7D6; --muted: #A79FAF;
  --brand: #E6C79C; --on-brand: #17121E; --brand-ink: #D9B6F2; --brand-soft: rgba(154, 91, 211, 0.18);
  --accent: #C39BEB; --champagne-ink: #E6C79C; --champagne-soft: rgba(230, 199, 156, 0.14);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.3), 0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-brand: 0 12px 32px rgba(230, 199, 156, 0.18);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-body)/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { -webkit-user-drag: none; user-select: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: #fff; }
[hidden] { display: none !important; }
.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Themed dropdown (js/select.js) */
.mselect { position: relative; }
.mselect select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.mselect-btn {
  width: 100%; height: 56px; padding: 0 var(--s-12) 0 var(--s-5); border-radius: var(--r-sm);
  display: flex; align-items: center; text-align: left; position: relative;
  background: var(--surface); color: var(--ink); font-size: var(--t-headline); font-weight: 600;
  box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow 200ms var(--ease-out), background 200ms var(--ease-out);
}
.mselect-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mselect-btn::after {
  content: ''; position: absolute; right: var(--s-5); top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: .7;
  transition: transform 300ms var(--ease-spring), margin 300ms var(--ease-spring);
}
.mselect.open .mselect-btn { box-shadow: inset 0 0 0 1.5px var(--ink); }
.mselect.open .mselect-btn::after { transform: rotate(-135deg); margin-top: -2px; }
.mselect-list {
  position: absolute; z-index: 80; left: 0; right: 0; top: calc(100% + var(--s-2));
  max-height: min(320px, 60vh); overflow-y: auto; overscroll-behavior: contain; padding: var(--s-2);
  border-radius: var(--r-lg); background: var(--card); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-2);
  transform-origin: top center; opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
  transition: opacity 180ms var(--ease-out), transform 260ms var(--ease-out);
  scrollbar-width: thin;
}
.mselect.up .mselect-list { top: auto; bottom: calc(100% + var(--s-2)); transform-origin: bottom center; }
.mselect.open .mselect-list { opacity: 1; transform: none; pointer-events: auto; }
.mselect-opt {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm); text-align: left; font-size: var(--t-body); font-weight: 500; color: var(--ink);
  transition: background 150ms var(--ease-out);
}
.mselect-opt small { margin-left: auto; color: var(--muted); font-weight: 500; font-size: var(--t-caption); white-space: nowrap; }
.mselect-opt.active { background: var(--surface); }
.mselect-opt[aria-selected="true"] { font-weight: 700; color: var(--brand-ink); }
.mselect.on-dark .mselect-btn { background: rgba(255, 255, 255, 0.08); color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.mselect.on-dark.open .mselect-btn { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
.mselect.on-dark .mselect-list { background: #1E1827; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 64px rgba(0, 0, 0, 0.5); }
.mselect.on-dark .mselect-opt { color: var(--on-dark); }
.mselect.on-dark .mselect-opt small { color: var(--on-dark-2); }
.mselect.on-dark .mselect-opt.active { background: rgba(255, 255, 255, 0.07); }
.mselect.on-dark .mselect-opt[aria-selected="true"] { color: var(--champagne); }

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