tokens.css

/*
 * Data Privacy Stack — design tokens (v2: refined / premium / light-first)
 * Calm neutral canvas + one restrained indigo accent; the octopus mascot
 * carries the colour. Type: Plus Jakarta Sans (display) + Inter (body).
 * Starlight reads --sl-color-* variables so the portal and docs stay aligned.
 */

:root {
  --dps-ink: #11131a;        /* near-black text */
  --dps-indigo: #4f46e5;     /* primary accent */
  --dps-indigo-dark: #4338ca;
  --dps-violet: #7c3aed;     /* secondary, used sparingly */
  --dps-violet-bright: #8957e8; /* mascot body violet — decorative accents */
  --dps-cyan: #22d3ee;
  --dps-muted: #5b6472;
  --dps-bg: #fbfbfd;         /* page canvas */
  --dps-card: #ffffff;
  --dps-border: #e6e8ee;
}

/* Light theme (default) */
:root[data-theme="light"] {
  --sl-color-accent-low: #e7e6fb;
  --sl-color-accent: var(--dps-indigo);
  --sl-color-accent-high: var(--dps-indigo-dark);
  --sl-color-white: var(--dps-ink);
  --sl-color-gray-1: #1c2230;
  --sl-color-gray-2: #3a4252;
  --sl-color-gray-3: var(--dps-muted);
  --sl-color-text-accent: var(--dps-indigo);
}

/* Dark theme */
:root[data-theme="dark"] {
  --sl-color-bg: #0e1116;
  --sl-color-accent-low: #1b1b3a;
  --sl-color-accent: #8b83ff;
  --sl-color-accent-high: #c7c2ff;
  --sl-color-text-accent: #a99dff;
}

/* Shared brand variables used by the custom landing page */
:root {
  /* Mascot-matched blue-highlight → violet-body, reserved for tiny accents (the octopus carries colour) */
  --dps-gradient: linear-gradient(135deg, #7c8be8 0%, #8957e8 100%);
  --dps-radius: 14px;
  --dps-shadow: 0 1px 2px rgba(17, 19, 26, 0.04), 0 14px 34px rgba(17, 19, 26, 0.09);
  --dps-font: "Inter", "Segoe UI", "Helvetica Neue", sans-serif;
  --dps-font-display: "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif;
  /* Strong custom easings (Emil Kowalski) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Make the docs/blog (Starlight) use the same type as the portal */
:root {
  --sl-font: "Inter", "Segoe UI", "Helvetica Neue", sans-serif;
  --sl-font-headings: "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif;
}

#cookie-consent-banner {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 9999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: min(920px, calc(100vw - 2rem));
  margin: 0 auto;
  padding: 1rem 1.1rem;
  color: var(--text, var(--sl-color-white, var(--dps-ink)));
  font-family: var(--dps-font);
  font-size: 0.9rem;
  line-height: 1.5;
  background: var(--card-bg, var(--sl-color-bg, var(--dps-card)));
  border: 1px solid var(--card-border, var(--sl-color-gray-5, var(--dps-border)));
  border-radius: var(--dps-radius);
  box-shadow: var(--dps-shadow);
}

#cookie-consent-banner p {
  flex: 1 1 320px;
  margin: 0;
  color: var(--text-muted, var(--sl-color-gray-2, var(--dps-muted)));
}

#cookie-consent-banner a {
  color: var(--accent-strong, var(--sl-color-text-accent, var(--dps-indigo)));
}

#cookie-consent-banner .consent-buttons {
  display: flex;
  flex: 0 0 auto;
  gap: 0.55rem;
}

#cookie-consent-banner button {
  min-height: 44px;
  padding: 0.55rem 1rem;
  font: inherit;
  font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
}

#cookie-consent-accept {
  color: #fff;
  background: var(--accent-strong, var(--sl-color-accent, var(--dps-indigo)));
  border: 1px solid transparent;
}

#cookie-consent-decline {
  color: var(--text, var(--sl-color-white, var(--dps-ink)));
  background: transparent;
  border: 1px solid var(--card-border, var(--sl-color-gray-5, var(--dps-border)));
}

@media (max-width: 520px) {
  #cookie-consent-banner,
  #cookie-consent-banner .consent-buttons {
    align-items: stretch;
    flex-direction: column;
  }
}