/* ============================================================
   OKTA — brand token file
   ------------------------------------------------------------
   The engine's core promise: a diagram's markup never changes.
   Re-branding = swapping THIS file for another token file.
   Every brand-specific value (color, font, radius, hero mark)
   lives here as a CSS custom property; the style pack only ever
   reads var(--token) and never hard-codes a brand value.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Accent (indigo) */
  --accent: #4B4FE8;
  --accent-text: #3D43E8;
  /* Shadow tint follows the accent (pills) */
  --accent-shadow: rgba(75, 79, 232, 0.20);

  /* Surfaces */
  --panel-cream: #EFE9DF;
  --panel-grad-from: #3D45E5;   /* gradient start (bottom-left) */
  --panel-grad-to:   #8E92F0;   /* gradient end   (top-right)   */

  /* Connectors */
  --connector-on-cream: #A8A296;
  --connector-on-blue:  rgba(255, 255, 255, 0.85);

  /* Ink + neutrals */
  --ink: #1A1A1A;
  --skeleton: #D9DCE3;

  /* Radii */
  --tile-radius:  22px;
  --pill-radius:  14px;
  --panel-radius: 28px;

  /* ----------------------------------------------------------
     Hero mark — Okta "sunburst".
     16 radial rounded-cap strokes, every 22.5°, r 14 → 26,
     stroke #1A1A1A width 3, hollow center, 64 viewBox.
     Encoded as a data-URI SVG so the markup stays brand-agnostic
     (markup just references var(--hero-logo)).
     ---------------------------------------------------------- */
  --hero-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg stroke='%231A1A1A' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='32' y1='18' x2='32' y2='6'/%3E%3Cline x1='37.36' y1='19.07' x2='41.95' y2='7.98'/%3E%3Cline x1='41.9' y1='22.1' x2='50.38' y2='13.62'/%3E%3Cline x1='44.93' y1='26.64' x2='56.02' y2='22.05'/%3E%3Cline x1='46' y1='32' x2='58' y2='32'/%3E%3Cline x1='44.93' y1='37.36' x2='56.02' y2='41.95'/%3E%3Cline x1='41.9' y1='41.9' x2='50.38' y2='50.38'/%3E%3Cline x1='37.36' y1='44.93' x2='41.95' y2='56.02'/%3E%3Cline x1='32' y1='46' x2='32' y2='58'/%3E%3Cline x1='26.64' y1='44.93' x2='22.05' y2='56.02'/%3E%3Cline x1='22.1' y1='41.9' x2='13.62' y2='50.38'/%3E%3Cline x1='19.07' y1='37.36' x2='7.98' y2='41.95'/%3E%3Cline x1='18' y1='32' x2='6' y2='32'/%3E%3Cline x1='19.07' y1='26.64' x2='7.98' y2='22.05'/%3E%3Cline x1='22.1' y1='22.1' x2='13.62' y2='13.62'/%3E%3Cline x1='26.64' y1='19.07' x2='22.05' y2='7.98'/%3E%3C/g%3E%3C/svg%3E");
}