/* ==========================================================================
   tokens.css — the single source of truth for every design decision.
   Change a value here and it propagates site-wide. Nothing below this file
   should hardcode a colour, size or duration.
   ========================================================================== */

:root {
  /* --- Palette -----------------------------------------------------------
     Lifted from the original Wix theme: a monochrome site with one mint
     accent. #00FF97 is the brand colour but it fails contrast on white
     (~1.5:1), so text and small UI use the darkened ramp while the raw mint
     is reserved for large graphic marks and for use on dark surfaces.      */
  --mint-50:  #EAFFF6;
  --mint-100: #AAFFDC;
  --mint-200: #80FFCB;
  --mint-400: #00FF97;   /* brand accent — graphics + on-dark only */
  --mint-600: #00AA65;
  --mint-700: #00844F;
  --mint-800: #00663C;   /* accent text on white — 6.1:1 */

  --ink-900: #0B0B0B;
  --ink-800: #171717;    /* primary ink + dark surface */
  --ink-700: #343434;
  --ink-500: #585858;
  --ink-400: #8B8B8B;
  --ink-300: #B0B0B0;
  --ink-200: #D5D5D5;
  --ink-100: #EEEEEE;
  --ink-050: #F1F1F1;
  --white:   #FFFFFF;

  /* Semantic aliases — components reference these, never the ramp above. */
  --surface:          var(--white);
  --surface-sunken:   var(--ink-050);
  --surface-inverse:  var(--ink-800);
  --text:             var(--ink-800);
  --text-muted:       var(--ink-500);
  --text-subtle:      var(--ink-400);
  --text-on-inverse:  var(--white);
  --text-muted-on-inverse: var(--ink-300);
  /* #585858 is only 2.5:1 on #171717 — too low for the small uppercase
     labels that sit on the dark bands and in the footer. ink-400 clears 4.5. */
  --text-subtle-on-inverse: var(--ink-400);
  --accent:           var(--mint-800);
  --accent-graphic:   var(--mint-400);
  --accent-on-inverse:var(--mint-400);
  --rule:             var(--ink-200);
  --rule-strong:      var(--ink-800);
  --rule-on-inverse:  #2E2E2E;

  /* --- Type --------------------------------------------------------------
     The original used HelveticaNeue Light/Thin/UltraLight. Two custom Wix
     uploads are fetched to assets/fonts and layered in front as vg-display /
     vg-text; if they are absent the stack degrades to the same Helvetica
     silhouette, so the site never depends on them.                        */
  --font-display: "vg-display", "Helvetica Neue", -apple-system,
                  BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-text:    "vg-text", "Helvetica Neue", -apple-system,
                  BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --weight-thin:   200;
  --weight-light:  300;
  --weight-normal: 400;
  --weight-medium: 500;

  /* Fluid scale. Every step interpolates 360px -> 1600px viewport, so there
     are no breakpoint jumps in the typography and no hardcoded px sizes. */
  --step--1: clamp(0.78rem, 0.75rem + 0.14vw, 0.875rem);
  --step-0:  clamp(0.94rem, 0.90rem + 0.19vw, 1.06rem);
  --step-1:  clamp(1.13rem, 1.05rem + 0.35vw, 1.38rem);
  --step-2:  clamp(1.38rem, 1.22rem + 0.70vw, 1.88rem);
  --step-3:  clamp(1.69rem, 1.40rem + 1.25vw, 2.63rem);
  --step-4:  clamp(2.06rem, 1.58rem + 2.08vw, 3.63rem);
  --step-5:  clamp(2.50rem, 1.72rem + 3.40vw, 5.00rem);
  --step-6:  clamp(2.75rem, 1.60rem + 5.00vw, 6.00rem);

  --leading-tight:  1.04;
  --leading-snug:   1.18;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.12em;

  /* --- Space -------------------------------------------------------------
     8pt grid. Section rhythm is fluid so long-scroll pages breathe on
     desktop without becoming cavernous on a phone.                        */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;     --space-9: 6rem;
  --space-10: 8rem;
  --space-section: clamp(4rem, 2rem + 8vw, 9rem);
  --space-gutter:  clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* --- Layout ------------------------------------------------------------ */
  --measure-prose:   68ch;   /* comfortable reading width */
  --measure-content: 1120px;
  --measure-wide:    1440px;
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 8px;
  --header-h:  clamp(56px, 48px + 1.5vw, 72px);

  /* --- The backdrop grid -------------------------------------------------
     The original faked this by hand-placing a 160x90 "Grid.png" bitmap,
     which only lined up at one viewport width. Here it is two gradients on
     a single cell size, so it tiles exactly at every width by construction
     and costs no network request.                                         */
  --grid-cell: clamp(40px, 5.5vw, 72px);
  --grid-line: color-mix(in srgb, var(--ink-800) 7%, transparent);
  --grid-line-strong: color-mix(in srgb, var(--ink-800) 13%, transparent);

  /* --- Motion ------------------------------------------------------------ */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  160ms;
  --dur:       320ms;
  --dur-slow:  640ms;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow:    0 4px 16px -4px rgb(0 0 0 / 0.10);
  --shadow-lg: 0 24px 56px -16px rgb(0 0 0 / 0.20);

  --z-header: 100;
  --z-drawer: 200;
  --z-lightbox: 300;
}

/* Browsers without color-mix() still get a visible grid. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --grid-line: rgba(23, 23, 23, 0.07);
    --grid-line-strong: rgba(23, 23, 23, 0.13);
  }
}