/* Skarpvect design tokens. Single source of truth — import this, never copy hex. */

:root {
  /* Core palette. Neutrals are biased violet so they sit under the accent
     rather than fight it — none of these greys are hue-neutral. */
  --sv-ink:        #171426;  /* violet-black: wordmark, body text, dark ground */
  --sv-graphite:   #2C2740;  /* cards and borders on dark                      */
  --sv-steel:      #6B6580;  /* muted text and rules on light (5.32:1)         */
  --sv-mist:       #E9E6EF;  /* light surfaces, dividers                       */
  --sv-paper:      #FBFAFD;  /* page background                                */
  --sv-iris:       #6438C9;  /* the accent, on LIGHT grounds (6.84:1)          */
  --sv-iris-light: #9F86E8;  /* the accent, on DARK grounds (6.05:1 on ink)    */

  /* Semantic aliases — prefer these in application code. */
  --sv-bg:          var(--sv-paper);
  --sv-surface:     #FFFFFF;
  --sv-text:        var(--sv-ink);
  --sv-text-muted:  var(--sv-steel);
  --sv-border:      var(--sv-mist);
  --sv-accent:      var(--sv-iris);

  /* The mark's three planes, lit from one source: darkest turns away, lightest
     faces the light. Style an inline SVG through these and it flips with the
     theme; the standalone files in logo/ carry the same values baked in.
     Adjacent planes stay at least 2.3:1 apart, which is what keeps the mark
     reading as three surfaces rather than two. Palette colours only. */
  --sv-mark-body:   var(--sv-ink);
  --sv-mark-crease: var(--sv-iris);
  --sv-mark-wing:   var(--sv-iris-light);

  /* Type */
  --sv-font-display: "Familjen Grotesk", system-ui, -apple-system, sans-serif;
  --sv-font-body:    "Familjen Grotesk", system-ui, -apple-system, sans-serif;
  --sv-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* 1.25 major third from 16px */
  --sv-text-xs:   0.75rem;   /* 12 */
  --sv-text-sm:   0.875rem;  /* 14 */
  --sv-text-base: 1rem;      /* 16 */
  --sv-text-lg:   1.25rem;   /* 20 */
  --sv-text-xl:   1.5625rem; /* 25 */
  --sv-text-2xl:  1.9375rem; /* 31 */
  --sv-text-3xl:  2.4375rem; /* 39 */
  --sv-text-4xl:  3.0625rem; /* 49 */

  /* 8px spacing scale */
  --sv-space-1: 0.5rem;  --sv-space-2: 1rem;  --sv-space-3: 1.5rem;
  --sv-space-4: 2rem;    --sv-space-6: 3rem;  --sv-space-8: 4rem;

  /* Corners are cut, not rounded. 2px is the ceiling everywhere except the
     app icon, which needs 24/128 to survive platform masking. */
  --sv-radius: 2px;
}

:root[data-theme="dark"] {
  --sv-bg:         var(--sv-ink);
  --sv-surface:    #201C33;
  --sv-text:       #EDEAF4;
  --sv-text-muted: #9A93AD;     /* steel is only 3.26:1 on ink — lighten it */
  --sv-border:     #383150;
  --sv-accent:     var(--sv-iris-light);
  --sv-mark-body:   var(--sv-paper);
  --sv-mark-crease: var(--sv-iris-light);
  --sv-mark-wing:   var(--sv-iris);
}

/* The accent flips with the ground, and this is the thing that is easy to get
   wrong. Iris is 6.84:1 on Paper but 2.53:1 on Ink; Iris Light is the reverse
   (6.05:1 on Ink, 2.86:1 on Paper). Never use one where the other belongs —
   always reach for --sv-accent, which already resolves per theme. */