/* Dán AI — design tokens
   Drop this in and use the variables. Dark is the default state of this brand. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;500;600&family=DM+Sans:wght@400;500;700&display=swap');

:root {
  /* ---- colour ---- */
  --onyx:       #121211;
  --onyx-panel: #1C1C19;
  --onyx-line:  #2A2A26;
  --gold:       #C9A24D;
  --gold-press: #B08E3F;
  --bronze:     #8A6E2F;
  --bone:       #F4F1E9;
  --bone-line:  #E2DDD1;
  --ash:        #6E6B63;
  --ash-dark:   #A29E93;

  /* semantic — dark surface (default) */
  --bg:          var(--onyx);
  --surface:     var(--onyx-panel);
  --line:        var(--onyx-line);
  --text:        var(--bone);
  --text-muted:  var(--ash-dark);
  --accent:      var(--gold);

  /* ---- type ---- */
  --font-ui:      'Space Grotesk', system-ui, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* ---- space ---- */
  --space-xs: 4px;  --space-sm: 8px;  --space-md: 16px;
  --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px;

  /* ---- radius ---- */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 9999px;

  /* ---- motion ---- */
  --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms; --dur-reveal: 640ms;
  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-enter:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
}

/* light surface — the exception, used for long-form reading */
[data-surface="light"] {
  --bg:         var(--bone);
  --surface:    #FFFFFF;
  --line:       var(--bone-line);
  --text:       var(--onyx);
  --text-muted: var(--ash);
  --accent:     var(--bronze);   /* gold goes muddy on light — always swap to bronze */
}

/* ---- base ---- */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.2; }
h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.1; letter-spacing: -0.005em; }
h2 { font-size: clamp(28px, 4vw, 40px); }
h3 { font-family: var(--font-ui); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }

.wordmark { font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.035em; white-space: nowrap; }
.wordmark .ai { color: var(--accent); }

.label {
  font-family: var(--font-ui); font-weight: 500; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent);
}

.hook {
  font-family: var(--font-ui); font-weight: 600;
  font-size: clamp(32px, 7vw, 96px); line-height: 1.15; letter-spacing: -0.02em;
}
.hook em { font-style: normal; color: var(--accent); }

.btn {
  font-family: var(--font-ui); font-weight: 500; font-size: 14px;
  background: var(--accent); color: var(--onyx);
  padding: 12px 24px; border: none; border-radius: var(--radius-sm);
  cursor: pointer; transition: background var(--dur-base) var(--ease-standard);
}
.btn:active { background: var(--gold-press); }
.btn--ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--line);
}

/* ---- the accent mark ---- */
.mark {
  position: relative; display: inline-block;
  aspect-ratio: 1; border-radius: 22%;
  background: var(--gold);
}
.mark::after {
  content: ''; position: absolute;
  left: 30%; top: 44.5%; width: 40%; height: 11%;
  border-radius: var(--radius-pill); background: var(--onyx);
  transform: rotate(-45deg);
}
.mark--inverse { background: var(--onyx); }
.mark--inverse::after { background: var(--gold); }
.mark--round { border-radius: 50%; background: var(--onyx); }
.mark--round::after { background: var(--gold); }

/* ---- signature motion: the accent draws itself ---- */
@keyframes accent-draw {
  from { transform: rotate(-45deg) scaleX(0); }
  to   { transform: rotate(-45deg) scaleX(1); }
}
.mark--animate::after {
  transform-origin: left center;
  animation: accent-draw var(--dur-reveal) var(--ease-enter) both;
}

@media (prefers-reduced-motion: reduce) {
  .mark--animate::after { animation: none; }
  * { transition-duration: 1ms !important; }
}