/* ============================================================================
   Vectorfy design system
   ----------------------------------------------------------------------------
   One place for tokens, type and surfaces; the three pages import it rather
   than each carrying its own copy of the palette (which is how they drifted).

   Two decisions worth stating, because they are not arbitrary:

   1. The accent carries meaning. --curve (teal) is the VECTOR side of this
      product and --raster (amber) is the SOURCE side. Compare tags, the lens
      ring, before/after labels and the engine chips all read from those two, so
      the colour tells you which half of the transformation you are looking at
      instead of just decorating the page.

   2. The type stack is script-aware. This ships in 8 languages including
      Hebrew and Arabic. Rubik covers Latin + Hebrew in one family; it has no
      Arabic, so IBM Plex Sans Arabic sits behind it and the browser resolves
      per glyph. A Latin-only display face would have left Arabic falling back
      to the system UI font mid-sentence.
   ========================================================================== */

:root{
  /* canvas — cool near-black, the artboard void */
  --ink:        #07090C;
  --surface:    #10141A;
  --surface-2:  #171D25;
  --surface-3:  #1E2630;
  --edge:       #232C38;
  --edge-soft:  #1A222C;

  --text:       #E8EDF2;
  --text-dim:   #A6B2C0;
  --muted:      #75838F;   /* cool grey, biased toward the accent — not neutral */

  /* the two halves of the product */
  --curve:      #4FD8C4;   /* vector / output */
  --curve-deep: #2BA898;
  --raster:     #F2994A;   /* raster / source */
  --premium:    #E8B84A;
  --danger:     #FF6B6B;
  --ok:         #5AD6A0;

  --curve-glow: 0 0 0 1px rgba(79,216,196,.30), 0 6px 28px -6px rgba(79,216,196,.32);
  --lift-1: 0 1px 2px rgba(0,0,0,.5);
  --lift-2: 0 8px 30px -10px rgba(0,0,0,.75);

  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px;

  --sans: "Rubik","IBM Plex Sans Arabic",-apple-system,BlinkMacSystemFont,
          "Segoe UI",system-ui,sans-serif;
  --mono: "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* type scale */
  --t-display: clamp(2.2rem, 1.2rem + 3.2vw, 4rem);
  --t-h1:      clamp(1.7rem, 1.1rem + 2vw, 2.6rem);
  --t-h2:      clamp(1.25rem, 1rem + .8vw, 1.6rem);
  --t-body:    .95rem;
  --t-sm:      .82rem;
  --t-xs:      .74rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--sans); font-size:var(--t-body); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:rgba(79,216,196,.28)}

h1,h2,h3{margin:0; text-wrap:balance; letter-spacing:-.02em; font-weight:600}
h1{font-size:var(--t-h1); line-height:1.15}
h2{font-size:var(--t-h2); line-height:1.25}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--curve); outline-offset:2px; border-radius:4px}

/* an uppercase micro-label — used for control groups and card eyebrows */
.label{
  font-size:var(--t-xs); font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- surfaces */
.panel{
  background:var(--surface); border:1px solid var(--edge-soft);
  border-radius:var(--r-lg);
}
/* Glass is reserved for chrome that floats OVER the artwork, so the image
   stays the brightest thing on screen. */
.glass{
  background:rgba(16,20,26,.72); backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(255,255,255,.07); box-shadow:var(--lift-2);
}

/* ---------------------------------------------------------------- controls */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  background:var(--surface-2); border:1px solid var(--edge); color:var(--text);
  border-radius:var(--r-sm); padding:.6em 1.1em; font:inherit; font-size:var(--t-sm);
  font-weight:500; cursor:pointer; transition:border-color .14s, background .14s, transform .06s;
}
.btn:hover:not(:disabled){border-color:var(--curve-deep); background:var(--surface-3)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.38; cursor:default}
.btn.primary{
  background:var(--curve); border-color:transparent; color:#04231F; font-weight:600;
}
.btn.primary:hover:not(:disabled){background:#5FEAD5; border-color:transparent}
.btn.gold{background:var(--premium); border-color:transparent; color:#2A1C02; font-weight:600}
.btn.gold:hover:not(:disabled){background:#F3C75F; border-color:transparent}
.btn.ghost{background:transparent}
.btn.block{width:100%}

/* segmented control */
.seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--edge);
  border-radius:var(--r-sm); padding:3px; gap:2px}
.seg button{
  background:transparent; border:0; color:var(--muted); font:inherit;
  font-size:var(--t-sm); font-weight:500; padding:.42em .9em;
  border-radius:6px; cursor:pointer; transition:.14s; white-space:nowrap;
}
.seg button:hover{color:var(--text-dim)}
.seg button.on{background:var(--surface-3); color:var(--text); box-shadow:var(--lift-1)}

/* range: the thumb is the accent, so "more detail" reads as more vector */
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:22px;
  background:transparent; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:3px; border-radius:2px; background:var(--edge);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; margin-top:-5.5px;
  border-radius:50%; background:var(--curve); border:2px solid var(--ink);
  box-shadow:0 0 0 1px var(--curve-deep); transition:transform .12s;
}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.15)}
input[type=range]::-moz-range-track{height:3px; border-radius:2px; background:var(--edge)}
input[type=range]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:var(--curve);
  border:2px solid var(--ink); cursor:pointer;
}

input[type=text],input[type=email],input[type=password]{
  background:var(--surface-2); border:1px solid var(--edge); color:var(--text);
  border-radius:var(--r-sm); padding:.65em .9em; font:inherit; font-size:var(--t-sm);
}
input::placeholder{color:var(--muted)}
input:focus{outline:none; border-color:var(--curve-deep); box-shadow:var(--curve-glow)}

/* ------------------------------------------------------------------- chips */
.pill{
  display:inline-flex; align-items:center; gap:.4em; font-size:var(--t-xs);
  font-weight:500; padding:.25em .7em; border-radius:var(--r-pill);
  border:1px solid currentColor;
}
.pill.vec{color:var(--curve)}
.pill.raster{color:var(--raster)}
.pill.ok{color:var(--ok)}
.pill.bad{color:var(--danger)}
.pill.gold{color:var(--premium)}
/* Key types. A live key spends real credits, so it gets the accent; a test key
   is deliberately quiet — the difference should be visible at a glance in a
   table of a dozen rows. */
.pill.live{color:var(--curve)}
.pill.test{color:var(--muted)}

/* -------------------------------------------------------------------- nav */
/* ONE ROW, ALWAYS. `flex-wrap:wrap` let the bar break into three stacked rows
   on a narrow screen — wordmark and two links, then the rest, then the language
   picker — which is the first thing anybody sees and it looked broken. The
   links now scroll sideways inside their own strip instead of wrapping, and the
   wordmark, the call to action and the language picker keep their places. */
.nav{
  display:flex; align-items:center; gap:1rem; padding:.7rem 1.1rem;
  border-bottom:1px solid var(--edge-soft); background:var(--surface);
  flex-wrap:nowrap; min-height:56px;
}
.nav .links{
  display:flex; align-items:center; gap:1.1rem; min-width:0; flex:1 1 auto;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.nav .links::-webkit-scrollbar{display:none}
.nav .lnk{color:var(--muted); font-size:var(--t-sm); transition:color .14s;
          white-space:nowrap}
.nav .lnk:hover,.nav .lnk.on{color:var(--text)}
.nav .spacer{margin-inline-start:auto}
.nav .btn{white-space:nowrap; flex:none}
.nav .wordmark{flex:none}
@media (max-width:760px){
  .nav{gap:.6rem; padding:.6rem .8rem}
  .nav .links{gap:.85rem}
  .nav .lnk{font-size:var(--t-xs)}
  /* The call to action goes, because every link in the bar already reaches the
     dashboard and the alternative is the navigation itself being squeezed to
     nothing — which is what happened: `Start free` and the language picker took
     priority and Home/Tools/Pricing vanished off the left. */
  .nav > .btn{display:none}
  /* And the signed-in address. Measured at 375px: the dashboard's bar was 33px
     wider than the viewport and the whole page slid with it, because the
     wordmark, the address and the language picker are all `flex:none` and an
     email has no shorter form. The control it sits beside — sign out — stays. */
  .nav .who-email{display:none}
  .nav .who{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}

/* The wordmark: the second half is set in the vector accent, so the name
   itself shows the raster→vector split the product performs. */
.wordmark{font-weight:700; font-size:1.05rem; letter-spacing:-.02em}
.wordmark em{font-style:normal; color:var(--curve)}

#langSel,.nav-lang{
  background:var(--surface-2); color:var(--text); border:1px solid var(--edge);
  border-radius:var(--r-sm); padding:.42em .7em; font:inherit; font-size:var(--t-xs);
  margin-inline-start:.5rem; flex:none; max-width:9.5rem;
}
@media (max-width:760px){
  /* On a phone the language picker is the least-used control in the bar and
     the one that pushed it onto a third row. It keeps its place; it just stops
     demanding room for the longest language name. */
  #langSel,.nav-lang{max-width:5.4rem; padding:.36em .45em}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
}