/* Etica Studio brand tokens. Single source: index.html and brandkit.html both load this file.
   Ivory and charcoal carry the page. Indigo is the one accent and is used sparingly. No motion. */
:root{
  --indigo:#4F46E5; --indigo-deep:#4338CA; --indigo-light:#9A94F7;
  --ivory:#F7F5EF; --mist:#E5E7EB; --stone:#D9D4C9; --slate:#6B7280; --slate-text:#4B5563; --charcoal:#0F0F12;
  --bg:var(--ivory); --paper:#FFFFFF; --warm:var(--mist); --ink:var(--charcoal); --ink-soft:var(--slate-text);
  --night:var(--charcoal); --on-night:var(--ivory); --on-night-faint:#B8B8BD;
  --accent:var(--indigo);
  --line:var(--stone); --line-night:rgba(247,245,239,.16);
  --font-sans:"Inter",system-ui,sans-serif; --font-display:var(--font-sans); /* one family site-wide: change here only */
  --space-2xs:8px; --space-xs:12px; --space-sm:16px; --space-md:24px; --space-lg:32px; --space-xl:48px;
  --space-section:clamp(64px,9vw,128px); --gutter:clamp(20px,5vw,64px); --maxw:1160px;
  --radius:8px; --radius-btn:4px;
}
.night,footer,.dark{--accent:var(--indigo-light)}

/* the one button system: flat, squared, colour change only */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:var(--radius-btn);
  background:var(--indigo);color:#fff;border:1.5px solid var(--indigo);font:600 1rem/1 var(--font-sans);text-decoration:none;white-space:nowrap;cursor:pointer}
.btn:hover,.btn:focus-visible{background:var(--indigo-deep);border-color:var(--indigo-deep)}
.btn .ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.btn--sm{min-height:40px;padding:0 18px;font-size:.95rem}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--charcoal);color:#fff;border-color:var(--charcoal)}
.night .btn,.dark .btn{background:var(--ivory);color:var(--charcoal);border-color:var(--ivory)}
.night .btn:hover,.dark .btn:hover{background:var(--stone);border-color:var(--stone)}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--indigo);text-decoration:underline;text-underline-offset:4px}
.link:hover{color:var(--indigo-deep)}
.night .link,.dark .link{color:var(--indigo-light)}

/* logo: lowercase wordmark, the i carries an indigo dot, STUDIO set wide beneath. No icon. */
.logo{display:inline-flex;flex-direction:column;align-items:flex-end;text-decoration:none;line-height:1;color:inherit;font-size:1.9rem}
.logo b{font-family:var(--font-display);font-weight:700;font-size:1em;line-height:.9;letter-spacing:-.045em}
.logo .dl{position:relative}
.logo .dl::after{content:"";position:absolute;left:50%;top:.075em;width:.17em;height:.17em;border-radius:50%;background:var(--indigo);transform:translateX(-50%)}
.logo small{font:500 max(.27em,10px)/1 var(--font-sans);letter-spacing:.62em;margin:.5em -.62em 0 0;text-transform:uppercase}
.night .logo .dl::after,footer .logo .dl::after,.dark .logo .dl::after{background:var(--indigo-light)}