/* ============================================================================
   Emerge design system — shared tokens & primitives for the VP app.
   Source of truth: "Emerge – Brand Toolkit Supply" (MultiAdaptor brand deck).
   Mode: Core — Inky Black base flood, Highlighter Pink used purposefully,
   type in neutral colours only, angular graphic language (cursor bar, crops).
   ============================================================================ */

/* Brand faces, self-hosted from the Emerge Design System bundle. Castoro &
   Karla (the toolkit's approved substitutes) remain in the stacks purely as
   fallback while the webfonts stream in (font-display: swap). */
@import url('https://fonts.googleapis.com/css2?family=Castoro:ital@0;1&family=Karla:wght@300;400;500;600;700&display=swap');

/* The supplied headline cut is GT Sectra Fine MEDIUM — the brand's web weight.
   It is registered at weight 400 because it IS the app's one headline weight. */
@font-face { font-family: 'GT Sectra Fine'; src: url('/assets/fonts/GT-Sectra-Fine-Medium.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'GT Sectra Fine'; src: url('/assets/fonts/GT-Sectra-Fine-Medium-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'GT America'; src: url('/assets/fonts/GT-America-Standard-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'GT America'; src: url('/assets/fonts/GT-America-Standard-Regular-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'GT America'; src: url('/assets/fonts/GT-America-Standard-Medium.woff2') format('woff2'); font-weight: 500 700; font-style: normal; font-display: swap; }

:root {
  /* Brand palette — hex values from the toolkit colour page */
  --ink:         #011c12;  /* Inky black (the "dark green") — base flood colour */
  --parchment:   #fbf9f4;  /* Parchment — neutral */
  --pink:        #ff3da4;  /* Highlighter pink — accent/lead, used sparingly */
  --violet:      #634bdb;  --blue:     #328ade;   /* supporting brights */
  --mustard:     #f2a91e;  --red:      #d2244d;
  --dark-blue:   #051246;  --dark-purple: #380051; /* supporting darks */
  --aubergine:   #56003c;  --burgundy: #4e0202;

  /* App tokens (existing names, re-pointed at the brand palette) */
  --bg:        var(--ink);
  --surface:   #06251a;                    /* ink, one step up */
  --surface2:  #0b3122;                    /* ink, two steps up */
  --border:    rgba(251, 249, 244, 0.10);
  --border2:   rgba(251, 249, 244, 0.18);
  --text:      var(--parchment);           /* type is neutral only */
  --bright:    #ffffff;
  --muted:     rgba(251, 249, 244, 0.62);
  --purple:    var(--dark-purple);
  --pink2:     #ff62b5;                    /* hover shade of the pink */
  --pink-bg:   rgba(255, 61, 164, 0.12);

  /* Type — GT Sectra Fine for headlines, GT America for everything else */
  --serif: 'GT Sectra Fine', 'Castoro', Georgia, serif;
  --sans:  'GT America', 'Karla', -apple-system, 'Segoe UI', sans-serif;

  /* Shape — the brand language is angular, not rounded */
  --radius: 2px;
}

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

/* THE CURSOR — the brand mark ("a blinking cursor alludes to more to come").
   Geometry taken from the logo artwork: a thin bar with both ends cut at the
   brand angle. Sized in em so it scales with the type it follows; the idle
   blink is the brand's "light fade" — methodical, not a hard on/off. */
.e-cursor {
  display: inline-block;
  width: 0.09em; height: 0.78em;
  margin-left: 0.14em;
  transform: translateY(0.06em);
  background: var(--pink);
  clip-path: polygon(100% 0, 0 7.5%, 0 100%, 100% 92.5%);
  animation: e-blink 1.4s ease-in-out infinite;
}
@keyframes e-blink { 0%, 40% { opacity: 1; } 55%, 85% { opacity: 0; } 100% { opacity: 1; } }

/* CORNER CROP — the photography treatment: top-left and bottom-right corners
   cut parallel to the bar angle. Apply to square imagery. */
.e-crop {
  clip-path: polygon(0 26%, 38% 0, 100% 0, 100% 74%, 62% 100%, 0 100%);
  border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  .e-cursor { animation: none; opacity: 1; }
}