/* ==========================================================================
   $MATE — design system
   Tokens and primitives extracted from the Claude Design boards
   (MATE Landing / MATE Terminal / Nexus 3.0 Dashboard).
   ========================================================================== */

:root {
  /* — surfaces ————————————————————————————————————————
     Frosted glass, and it can be real glass now: the backdrop was darkened
     to a narrow band (#04080e–#0d1927), so a surface at ~62% opacity varies
     by only about three luminance points across the whole sweep. Earlier,
     over the bright gradient, the same translucency made cards appear and
     vanish as the animation moved under them.

     Each surface is a cool wash over a dark base, and every panel carries a
     lit top edge — that hairline is what reads as glass rather than as a
     flat tinted box.

     Rendered:  ground #080f1a · shell #131d2c · dark #1a2434
                glass #1e2a3c · pill #26344a · cream #edf1f7                */
  --shell:        linear-gradient(180deg, rgba(190, 214, 245, 0.07), rgba(190, 214, 245, 0.02)),
                  rgba(22, 33, 50, 0.34);
  --shell-line:   rgba(180, 208, 245, 0.16);

  --dark:         linear-gradient(180deg, rgba(190, 214, 245, 0.055), rgba(190, 214, 245, 0.015)),
                  rgba(16, 25, 39, 0.62);
  --dark-deep:    linear-gradient(180deg, rgba(190, 214, 245, 0.04), rgba(190, 214, 245, 0.01)),
                  rgba(11, 18, 30, 0.70);
  --dark-solid:   linear-gradient(180deg, rgba(190, 214, 245, 0.07), rgba(190, 214, 245, 0.02)),
                  rgba(19, 29, 45, 0.64);
  --dark-line:    rgba(180, 208, 245, 0.13);

  --glass:        linear-gradient(180deg, rgba(190, 214, 245, 0.105), rgba(190, 214, 245, 0.035)),
                  rgba(24, 36, 55, 0.62);
  --glass-strong: linear-gradient(180deg, rgba(190, 214, 245, 0.09), rgba(190, 214, 245, 0.03)),
                  rgba(20, 31, 48, 0.52);
  --glass-flat:   rgba(24, 36, 55, 0.62);
  --glass-line:   rgba(180, 208, 245, 0.16);
  --glass-edge:   rgba(180, 208, 245, 0.20);

  --cream:        rgba(237, 241, 247, 0.96);
  --cream-soft:   rgba(237, 241, 247, 0.94);
  --pill-dark:    rgba(150, 180, 220, 0.17);

  /* the lit edge every glass surface carries */
  --edge: inset 0 1px 0 rgba(214, 232, 255, 0.14);
  --edge-strong: inset 0 1px 0 rgba(214, 232, 255, 0.20);
  --frost: blur(26px) saturate(1.35);

  /* — ink ————————————————————————————————————————————— */
  --ink:          #f0f5fb;
  --ink-2:        #eaf1f9;
  --ink-3:        #e6edf6;
  --ink-4:        #e9eff7;
  --ink-on-cream: #101a28;

  /* Secondary type. The boards ran these as low as 45%; on a translucent
     panel that measured under 2:1, so every step is lifted. On the dark
     ground they clear AA comfortably. */
  --mute-80: rgba(206, 221, 240, 0.94);
  --mute-74: rgba(206, 221, 240, 0.88);
  --mute-70: rgba(206, 221, 240, 0.84);
  --mute-66: rgba(206, 221, 240, 0.80);
  --mute-62: rgba(206, 221, 240, 0.78);
  --mute-60: rgba(206, 221, 240, 0.76);
  --mute-55: rgba(206, 221, 240, 0.72);
  --mute-50: rgba(206, 221, 240, 0.68);
  --mute-45: rgba(206, 221, 240, 0.64);

  --body-76: rgba(222, 233, 248, 0.88);
  --body-90: rgba(230, 239, 251, 0.96);

  /* — semantic ———————————————————————————————————————— */
  --pos:   #ccff00;                 /* the lime from the branding reference */
  --pos-2: #a8d400;                 /* one step down, for fills and rules */
  --warn:  #e8c47c;
  --neg:   #e8968a;

  /* — rule / divider —————————————————————————————————— */
  --rule:      rgba(150, 180, 220, 0.14);
  --rule-soft: rgba(150, 180, 220, 0.12);
  --rule-firm: rgba(150, 180, 220, 0.18);

  /* — radii ——————————————————————————————————————————— */
  --r-shell: 34px;
  --r-xl:    30px;
  --r-lg:    26px;
  --r-md:    22px;
  --r-sm:    18px;
  --r-pill:  999px;

  /* — metrics ————————————————————————————————————————— */
  --page:  1320px;
  --gap:   14px;
  --blur:  blur(22px);

  /* — type ———————————————————————————————————————————— */
  --sans:    'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* — page backdrops —————————————————————————————————— */
  --bg-landing:
    radial-gradient(60% 34% at 12% 2%,  rgba(90, 136, 194, 0.24) 0%, rgba(90,136,194,0) 55%),
    radial-gradient(55% 40% at 88% 30%, rgba(8, 16, 30, 0.50)    0%, rgba(8,16,30,0)    62%),
    radial-gradient(70% 30% at 20% 78%, rgba(70, 110, 162, 0.14) 0%, rgba(70,110,162,0) 60%),
    linear-gradient(168deg, #131e30 0%, #17263e 22%, #203352 44%, #16253c 66%, #111c2e 84%, #142238 100%);
  --bg-app:
    radial-gradient(90% 70% at 12% 4%,  rgba(90, 136, 194, 0.22) 0%, rgba(90,136,194,0) 55%),
    radial-gradient(85% 85% at 88% 96%, rgba(8, 16, 30, 0.55)    0%, rgba(8,16,30,0)    62%),
    linear-gradient(155deg, #131e30 0%, #182740 36%, #203352 62%, #111c2e 100%);
}

/* ——— reset ——————————————————————————————————————————— */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: #16233a;
}

body {
  margin: 0;
  min-height: 100dvh;
  /* transparent so the animated backdrop below shows through */
  background: transparent;
  color: var(--ink-3);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ——— animated backdrop ————————————————————————————————
   One fixed WebGL layer behind every element on the page. The static
   gradient underneath is what a browser without WebGL2 (or with JS off)
   renders instead — same three colours, no motion.                       */
#mate-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  contain: strict;
}

/* Surfaces lift off this ground rather than sinking into it, so no darkening
   veil is needed for contrast. This is the corner vignette the reference
   shows — it keeps the eye on the board in the middle. */
#mate-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 92% at 50% 42%, rgba(6, 12, 22, 0) 40%, rgba(6, 12, 22, 0.42) 100%);
}

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

a { color: var(--ink-3); text-decoration: none; transition: color .18s ease; }
a:hover { color: #fff; }

:focus-visible {
  outline: 2px solid rgba(237, 241, 247, 0.92);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(253, 250, 244, 0.85); color: var(--ink-on-cream); }

/* ——— scrollbars ————————————————————————————————————— */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.26) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.34); }

/* ==========================================================================
   Primitives
   ========================================================================== */

.mono { font-family: var(--mono); font-weight: 300; }

/* — glass surfaces —————————————————————————————————— */
.card {
  box-sizing: border-box;
  border-radius: var(--r-lg);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  box-shadow: var(--edge);
  backdrop-filter: var(--frost);
  -webkit-backdrop-filter: var(--frost);
}
.card--dark {
  background: var(--dark);
  border-color: var(--dark-line);
  backdrop-filter: var(--frost);
  -webkit-backdrop-filter: var(--frost);
}
.card--deep {
  background: var(--dark-deep);
  border-color: var(--dark-line);
  backdrop-filter: var(--frost);
  -webkit-backdrop-filter: var(--frost);
}
.card--cream {
  background: var(--cream-soft);
  border-color: var(--cream-soft);
  color: var(--ink-on-cream);
}

/* — pills ————————————————————————————————————————— */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.13);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--mute-80);
  white-space: nowrap;
}

/* — buttons ———————————————————————————————————————— */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 28px 8px 8px;
  border-radius: var(--r-pill);
  font-size: 16px;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}
.btn:hover .btn__icon { transform: rotate(45deg); }

.btn--cream {
  background: var(--cream);
  color: var(--ink-on-cream);
}
.btn--cream .btn__icon { background: rgba(16, 26, 40, 0.10); }
.btn--cream:hover {
  background: #fff;
  color: var(--ink-on-cream);
  box-shadow: 0 16px 34px rgba(2, 6, 14, 0.22);
}

.btn--ghost {
  padding: 17px 28px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid var(--shell-line);
  color: var(--ink-3);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* — orbs (the round icon buttons in the top-right of every board) ——— */
.orb {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  flex: none;
  border-radius: 50%;
  background: var(--glass-strong);
  border: 1px solid rgba(255, 255, 255, 0.32);
  transition: background .2s ease, transform .2s ease;
}
.orb:hover { background: rgba(255, 255, 255, 0.20); transform: translateY(-2px); }

/* — the wordmark ———————————————————————————————————
   The real mate mark, inlined as a symbol so it inherits currentColor and
   flips with the band it sits in. */
.wordmark {
  display: inline-flex;
  align-items: center;
  color: #ffffff;
  transition: opacity .18s ease;
}
.wordmark:hover { opacity: .74; }
.wordmark__svg {
  display: block;
  width: 78px;
  height: 23px;
  fill: currentColor;
}

/* — progress meters —————————————————————————————————
   Shared by the terminal's paired-principal and tier bars and by the Nexus
   communities dial, so it belongs here rather than in either page's sheet. */
.meter {
  height: 18px;
  border-radius: 7px;
  background: var(--rule-firm);
  overflow: hidden;
}
.meter__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8fb8e4, #e9f2fc);
  transition: width 1.1s cubic-bezier(.2, .8, .3, 1);
}

/* — key/value rows ————————————————————————————————— */
.kv {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 12px;
}
.kv__k { color: var(--mute-55); }
.kv__v { color: var(--body-90); text-align: right; }
.kv--ruled { padding-bottom: 9px; border-bottom: 1px solid var(--rule); }

/* — toast ————————————————————————————————————————————
   Used by the landing, the dashboard and the terminal; it lived in
   terminal.css, so every confirmation on the other two pages was invisible. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 20px);
  padding: 13px 22px;
  border-radius: var(--r-pill);
  background: rgba(10, 16, 27, 0.94);
  border: 1px solid var(--rule-firm);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 13.5px;
  color: var(--ink-3);
  max-width: min(520px, calc(100vw - 32px));
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 120;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* — visually hidden ——————————————————————————————— */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* — scroll reveal ————————————————————————————————— */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}


/* ==========================================================================
   High contrast
   Readers who ask their OS for more contrast get a deeper glass base and
   full-strength type — the same layout, taken to WCAG AA.
   ========================================================================== */

@media (prefers-contrast: more) {
  :root {
    /* On this ground more contrast means brighter surfaces and brighter
       edges, not darker ones — the panels have to pull further away from the
       page, and the hairlines have to actually draw the card. */
    --shell:        rgba(28, 42, 62, 0.72);
    --shell-line:   rgba(176, 205, 240, 0.42);

    --dark:         rgba(32, 47, 68, 0.97);
    --dark-deep:    rgba(25, 38, 56, 0.98);
    --dark-solid:   rgba(36, 52, 74, 0.97);
    --dark-line:    rgba(176, 205, 240, 0.38);

    --glass:        linear-gradient(180deg, rgba(200, 224, 255, 0.07), rgba(200, 224, 255, 0.03)),
                    rgba(45, 64, 90, 0.97);
    --glass-strong: linear-gradient(180deg, rgba(200, 224, 255, 0.06), rgba(200, 224, 255, 0.03)),
                    rgba(38, 55, 79, 0.95);
    --glass-flat:   rgba(45, 64, 90, 0.97);
    --glass-line:   rgba(176, 205, 240, 0.44);
    --glass-edge:   rgba(176, 205, 240, 0.48);

    --pill-dark:    rgba(58, 82, 114, 0.98);

    --ink:   #ffffff;
    --ink-2: #fbfdff;
    --ink-3: #f6fafe;
    --ink-4: #f4f9fe;

    --mute-80: #eaf2fc; --mute-74: #eaf2fc; --mute-70: #e6eefa;
    --mute-66: #e6eefa; --mute-62: #e2ebf8; --mute-60: #e2ebf8;
    --mute-55: #dee8f6; --mute-50: #dee8f6; --mute-45: #d9e4f4;

    --body-76: #f0f6fd;
    --body-90: #f8fbff;

    --rule:      rgba(176, 205, 240, 0.36);
    --rule-soft: rgba(176, 205, 240, 0.32);
    --rule-firm: rgba(176, 205, 240, 0.44);

    --pos:  #a8ecc6;
    --warn: #f6dda6;
    --neg:  #f7b6a8;
  }

  /* Push the ground further down so the raised panels read as panels. */
  #mate-backdrop::after {
    background: radial-gradient(120% 92% at 50% 42%,
      rgba(2, 5, 11, 0.40) 20%, rgba(2, 5, 11, 0.78) 100%);
  }
}