/* VIDIIO — Design Tokens
   Deep green-charcoal · warm white · muted sage accent
   Editorial serif (Cormorant Garamond) + Swiss grotesque (Hanken Grotesk) */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  /* Core palette */
  --bg-deep:    #161A17;   /* deep green-charcoal */
  --bg-deep-2:  #1C211D;   /* raised surface */
  --bg-deep-3:  #232A24;   /* card / hover */
  --paper:      #ECE7DC;   /* warm white */
  --paper-2:    #E2DCCF;   /* dim paper */
  --stone:      #9A958A;   /* muted neutral text */
  --stone-2:    #6E6A60;
  --sage:       #8B9882;   /* accent (legible on dark) */
  --sage-deep:  #5E6B58;
  --sage-bright:#A8B49E;

  /* Semantic — on dark */
  --ink:        var(--paper);
  --ink-dim:    rgba(236,231,220,0.62);
  --ink-faint:  rgba(236,231,220,0.40);
  --line:       rgba(236,231,220,0.14);
  --line-soft:  rgba(236,231,220,0.08);

  /* Semantic — on paper */
  --on-paper:        #1A1F1B;
  --on-paper-dim:    rgba(22,26,23,0.60);
  --on-paper-faint:  rgba(22,26,23,0.38);
  --line-dark:       rgba(22,26,23,0.14);

  /* Type */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Hanken Grotesk', system-ui, sans-serif;

  /* Tracking */
  --track-eyebrow: 0.28em;
  --track-wordmark: 0.30em;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

/* Shared primitives ------------------------------------------------ */
.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}
.wordmark {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.serif-display {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.01em;
}
.serif-italic { font-style: italic; font-weight: 500; }