/* MODULA QR design tokens.
   Every value a designer might want to change lives here and nowhere else.
   No literal colour, length or font value belongs below this block. */

:root {
  /* ink */
  --bg:            #142e52;
  --bg-deep:       #0d1e38;
  --panel:         rgba(13, 30, 56, 0.42);
  --paper:         #f2efe6;
  --text:          #e4eefb;
  --text-dim:      #8fabd4;
  --text-mid:      #b9cdea;
  --line:          rgba(178, 208, 246, 0.55);
  --line-strong:   rgba(178, 208, 246, 0.50);
  --line-mid:      rgba(178, 208, 246, 0.45);
  --line-soft:     rgba(178, 208, 246, 0.35);
  --line-faint:    rgba(178, 208, 246, 0.25);
  --field:         rgba(10, 24, 46, 0.60);
  --well:          rgba(10, 24, 46, 0.50);
  --well-soft:     rgba(10, 24, 46, 0.35);
  --panel-solid:   rgba(13, 30, 56, 0.90);
  --card-hover:    rgba(20, 44, 82, 0.70);
  --text-soft:     #a8bfe2;
  --hover-fg:      #ffffff;
  --accent:        #7fd4ff;
  --accent-dim:    #9fc6f2;
  --ok:            #8effc1;
  --warn:          #ffd166;
  --bad:           #ff8a7a;

  /* The fill behind a selected control. Everything that reads as "this one is
     chosen" uses it, including the preview mat. */
  --accent-wash:      color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-wash-soft: color-mix(in srgb, var(--accent) 11%, transparent);
  --accent-edge:      color-mix(in srgb, var(--accent) 30%, transparent);

  /* page frame. The grid is phased off these so a grid line lands exactly on
     the shell's top and left borders instead of running beside them. */
  --page-pad-x:    20px;
  --page-pad-y:    28px;

  /* grid backdrop */
  --grid-fine:     rgba(159, 199, 247, 0.055);
  --grid-bold:     rgba(159, 199, 247, 0.12);
  --grid-fine-gap: 24px;
  --grid-bold-gap: 120px;
  /* 50% resolves against (viewport - tile), so half a tile is added back to
     land on the shell's edge. max() keeps it honest once the shell hits the
     page padding on narrow screens. */
  --grid-x-fine:   max(var(--page-pad-x), calc(50% + (var(--grid-fine-gap) / 2) - (var(--max-width) / 2)));
  --grid-x-bold:   max(var(--page-pad-x), calc(50% + (var(--grid-bold-gap) / 2) - (var(--max-width) / 2)));

  /* type */
  --font-ui:       "Space Grotesk", system-ui, sans-serif;
  --font-mono:     "IBM Plex Mono", ui-monospace, monospace;
  --font-hand:     "Caveat", cursive;
  --fs-hero:       58px;
  --fs-h2:         34px;
  --fs-body:       15px;
  --fs-small:      13px;
  --fs-label:      10.5px;
  --fs-mono:       11.5px;
  --track-label:   0.12em;
  --track-mono:    0.06em;

  /* metrics */
  --gap:           12px;
  --gap-lg:        24px;
  --pad-section:   36px;
  --pad-page:      40px;
  --radius:        0px;
  --border:        1px;
  --control-h:     38px;
  --swatch-w:      64px;
  --max-width:     1240px;
  --preview-pad:   22px;
  --plate-shadow:  0 24px 60px rgba(4, 12, 28, 0.55);
  /* The mat the preview sits on. Deliberately not --paper: that colour is the
     artwork's own background and gets exported, so matching it here made the
     margin look like part of the file. It uses the selected-control fill, so
     the preview reads as chrome the same way a chosen button does. */
  --stage-mat:     var(--accent-wash);
  --stage-edge:    var(--accent-edge);
}