/* =============================================================================
 * Stryde SDK — canonical PALETTE for Tailwind apps (req §6.5 / §18.3).
 *
 * The SINGLE SOURCE OF TRUTH for the surface palette every hosted app consumes.
 * Where stryde.css carries the platform's BRAND accents + the `.stryde-*`
 * component classes (hex tokens, for the shell/wiki/launcher), THIS file carries
 * the SURFACE tokens in the *HSL-channel* form Tailwind apps read as
 * `hsl(var(--bg))` / `hsl(var(--bg-elev) / .8)` etc.
 *
 * Why a separate file: `--bg` is consumed two different ways across the
 * platform — hex (`var(--bg)`) on the shell/wiki, HSL channels
 * (`hsl(var(--bg))`) in Tailwind apps. One file can't define both without
 * breaking the other (`hsl(#F5F2EC)` is invalid → transparent cards). So the
 * shell/wiki link stryde.css; Tailwind apps link BOTH stryde.css (brand+font+
 * glow+components) AND this (the surface palette).
 *
 * Authoritative by design: apps declare their own tokens inside `@layer base`
 * (lower cascade priority); these UNLAYERED rules win, so linking this file
 * makes the SDK the source of truth and any app-local drift is overridden.
 * A new Tailwind app that links this gets the corrected superapp palette
 * (warm-beige light canvas, deep-purple dark, solid surfaces) for FREE — the
 * "right SDK" = plug-and-play, no hand-tuned token block to get wrong.
 *
 * Values mirror the inherited apps' good state (the warm-beige fix: --bg moved
 * off the old lavender 245-hue to 40-hue cream). Keep this and the apps'
 * globals.css :root/.dark blocks (their bundled fallback) in sync.
 * ========================================================================== */

:root {
  /* ---- Stryde — light (warm cream canvas, white surfaces) ---------------- */
  --bg:            40 33 94;    /* #F5F2EC warm beige (NOT lavender) */
  --bg-elev:       0 0 100;     /* #FFFFFF surface */
  --bg-soft:       44 39 97;    /* #FAF8F3 warm */
  --ink:           0 0 4;       /* #0A0A0A near-black */
  --ink-2:         235 8 28;    /* body text */
  --ink-3:         235 8 44;    /* muted — WCAG-AA on cream (4.5:1) */
  --line:          0 0 0;       /* alpha-driven via /10 etc */
  --line-strong:   0 0 0;
  --brand-violet:  258 90 66;   /* #8B5CF6 */
  --brand-azure:   217 100 71;  /* #6BA4FF */
  --brand-teal:    187 82 43;   /* #14B8C8 */
  --warn:          24 96 56;    /* #FB923C — sparingly */
  --pill-bg:       0 0 4;
  --pill-ink:      0 0 100;
  --ring:          258 90 66;

  /* Ambient background composition — subtle on the cream canvas. */
  --glow-1-color:  258 90 66;
  --glow-1-alpha:  0.05;
  --glow-2-color:  217 100 71;
  --glow-2-alpha:  0.04;
  --vignette-alpha: 0;
}

.dark {
  /* ---- Stryde — dark (deep purple-black, lifted card hierarchy) ---------- */
  --bg:            262 30 9;     /* #14101E */
  --bg-elev:       262 27 13;    /* #1F1A2A */
  --bg-soft:       262 25 11;    /* between bg and bg-elev */
  --ink:           42 53 94;     /* #F5F1E8 warm cream text */
  --ink-2:         240 6 65;     /* #A0A0A8 */
  --ink-3:         240 5 44;     /* #6B6B75 */
  --line:          0 0 100;      /* white as HSL — alpha via /10 etc */
  --line-strong:   0 0 100;
  --brand-violet:  258 90 66;
  --brand-azure:   217 100 71;
  --brand-teal:    187 82 43;
  --warn:          24 96 56;
  --pill-bg:       42 53 94;     /* INVERTED — cream pill on dark canvas */
  --pill-ink:      265 33 5;
  --ring:          258 90 66;

  --glow-1-color:  258 90 66;    /* violet */
  --glow-1-alpha:  0.18;
  --glow-2-color:  187 82 43;    /* teal */
  --glow-2-alpha:  0.06;
  --vignette-alpha: 0.18;
}

/* =============================================================================
 * CANONICAL COMPONENTS for Tailwind apps — the `.stryde-*` catalog, in the
 * HSL-channel form apps consume (`hsl(var(--bg-elev))`). These MIRROR the
 * identical classes in stryde.css, which resolve `var(--bg-elev)` as a hex
 * colour and therefore only work on the shell/wiki. Because apps link
 * stryde.css THEN this file, these definitions load last and win — so an app
 * can use `.stryde-card` / `.stryde-btn-primary` / a `.stryde-side` sidebar and
 * get the EXACT homepage treatment with zero per-app CSS. That is the
 * plug-and-play contract (app-standards §6.5).
 * ========================================================================== */

:root {
  /* App-side gradient + shadow, derived from the HSL brand/ink tokens. */
  --stryde-grad: linear-gradient(105deg, hsl(var(--brand-violet)), hsl(var(--brand-azure)));
  --stryde-shadow: 0 1px 2px hsl(var(--ink) / 0.05), 0 18px 44px -22px hsl(var(--ink) / 0.20);
  --stryde-ease: cubic-bezier(.22, .7, .2, 1);
}

/* ---- surfaces ----------------------------------------------------------- */
.stryde-card {
  background: hsl(var(--bg-elev));
  border: 1px solid hsl(var(--line) / 0.10);
  border-radius: 18px;
  padding: 22px;
  box-shadow: none;
  transition: transform .2s var(--stryde-ease), box-shadow .2s var(--stryde-ease), border-color .2s var(--stryde-ease);
}
.stryde-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--stryde-shadow);
  border-color: hsl(var(--brand-violet) / 0.40);
}
.stryde-panel {
  background: hsl(var(--bg-elev));
  border: 1px solid hsl(var(--line) / 0.10);
  border-radius: 18px;
  box-shadow: var(--stryde-shadow);
  padding: 22px;
}

/* ---- headings & rhythm -------------------------------------------------- */
.stryde-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: hsl(var(--brand-violet));
  margin-bottom: 12px;
}
.stryde-hero {
  font-size: clamp(32px, 6vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.035em;
  color: hsl(var(--ink));
}
.stryde-grad,
.stryde-hero .g {
  background: var(--stryde-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stryde-lead {
  font-size: 19px;
  line-height: 1.6;
  color: hsl(var(--ink-2));
  max-width: 64ch;
}
.stryde-section { margin: 0 0 64px; }

/* ---- buttons ------------------------------------------------------------ */
.stryde-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 650;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform .18s var(--stryde-ease), background-color .18s var(--stryde-ease), box-shadow .18s var(--stryde-ease);
}
.stryde-btn:active { transform: translateY(.5px); }
.stryde-btn:disabled { opacity: .55; cursor: not-allowed; }
.stryde-btn-primary {
  background-image: var(--stryde-grad);
  color: #fff;
  box-shadow: 0 18px 44px -22px hsl(var(--brand-violet) / 0.9);
}
.stryde-btn-primary:hover { transform: translateY(-1px); }
.stryde-btn-ghost {
  background: hsl(var(--bg-elev));
  color: hsl(var(--ink));
  border-color: hsl(var(--line) / 0.12);
}
.stryde-btn-ghost:hover { background: hsl(var(--bg-soft)); }

/* ---- controls & data ---------------------------------------------------- */
.stryde-input {
  width: 100%;
  background: hsl(var(--bg-soft));
  border: 1px solid hsl(var(--line) / 0.12);
  border-radius: 12px;
  color: hsl(var(--ink));
  padding: 11px 14px;
  font: inherit;
  transition: border-color .15s var(--stryde-ease), box-shadow .15s var(--stryde-ease);
}
.stryde-input::placeholder { color: hsl(var(--ink-3)); }
.stryde-input:focus {
  outline: none;
  border-color: hsl(var(--brand-violet) / 0.55);
  box-shadow: 0 0 0 3px hsl(var(--brand-violet) / 0.18);
}
.stryde-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid hsl(var(--line) / 0.12);
  color: hsl(var(--ink-2));
}
.stryde-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.stryde-table th {
  text-align: start;
  color: hsl(var(--ink-3));
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 12px 14px;
}
.stryde-table td { padding: 12px 14px; color: hsl(var(--ink)); }
.stryde-table th,
.stryde-table td { border-bottom: 1px solid hsl(var(--line) / 0.06); }
.stryde-note {
  font-size: 15px;
  color: hsl(var(--ink-2));
  border-inline-start: 3px solid hsl(var(--brand-teal));
  padding: 6px 0 6px 16px;
  background: linear-gradient(90deg, hsl(var(--brand-violet) / 0.10), transparent);
  border-radius: 0 8px 8px 0;
}

/* =============================================================================
 * SIDE MENU — the ONLY app-level navigation allowed (app-standards §6.2: the
 * shell owns the top nav; apps use side menus). Build the app's sidebar with
 * these classes and it matches the homepage glass aesthetic with no custom CSS.
 *
 *   <nav class="stryde-side">
 *     <a class="stryde-side-brand" href="/">…logo… <span>App</span></a>
 *     <div class="stryde-side-section">Workspace</div>
 *     <a class="stryde-side-item active"><svg class="stryde-side-icon">…</svg> Overview</a>
 *     <a class="stryde-side-item">…</a>
 *   </nav>
 * ========================================================================== */
.stryde-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  inline-size: 248px;
  flex: none;
  padding: 16px 12px;
  background: hsl(var(--bg-soft));
  border-inline-end: 1px solid hsl(var(--line) / 0.08);
  min-block-size: 100dvh;
}
.stryde-side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 14px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.02em;
  color: hsl(var(--ink));
  text-decoration: none;
}
.stryde-side-brand img { height: 26px; width: auto; border-radius: 6px; }
.stryde-side-section {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: hsl(var(--ink-3));
  padding: 14px 12px 6px;
}
.stryde-side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: hsl(var(--ink-2));
  font-size: 14.5px;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s var(--stryde-ease), color .15s var(--stryde-ease);
}
.stryde-side-item:hover { background: hsl(var(--line) / 0.06); color: hsl(var(--ink)); }
.stryde-side-item.active {
  background: hsl(var(--brand-violet) / 0.12);
  color: hsl(var(--ink));
  font-weight: 650;
}
.stryde-side-icon {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}