/* ============================================================
   OTTO CREATIVE — COLOR TOKENS
   Playful, warm, high-energy palette for creative assets.
   (The Otto *platform* UI uses a quieter system — this is not it.)
   Official brand marks: sky #22C4FD · ink #393A3D · white.
   ============================================================ */
:root {
  /* ---- Canvas & ink ---------------------------------------- */
  --otto-cream: #FBF7F0;        /* signature warm canvas        */
  --otto-cream-deep: #F4EFE6;   /* slightly deeper cream        */
  --otto-white: #FFFFFF;
  --otto-ink: #1B1D23;          /* primary near-black           */
  --otto-ink-soft: #393A3D;     /* official brand dark gray     */
  --otto-night: #15171C;        /* dark sections / footer       */

  /* ---- Sky (primary brand color) --------------------------- */
  --otto-sky: #18BFF7;          /* primary action / brand sky   */
  --otto-sky-mark: #22C4FD;     /* official logo sky            */
  --otto-sky-light: #3DD2FF;
  --otto-sky-dark: #0E8FD6;
  --otto-sky-tint: #EAF8FF;     /* soft surface / badge bg      */

  /* ---- Coral (energy / patients) --------------------------- */
  --otto-coral: #FF6B4A;
  --otto-coral-dark: #E04A26;
  --otto-coral-tint: #FFEDE7;
  --otto-coral-tint-2: #FFF6F2;

  /* ---- Mint (success / staff time / growth) ---------------- */
  --otto-mint: #1FD1A0;
  --otto-mint-dark: #0E9E76;
  --otto-mint-tint: #E4FBF3;

  /* ---- Violet (content & social / premium) ----------------- */
  --otto-violet: #6C4CF1;
  --otto-violet-deep: #6E14E0;
  --otto-violet-bright: #841BFF;
  --otto-violet-tint: #F3EEFF;

  /* ---- Sunny (highlights / partners) ----------------------- */
  --otto-sunny: #FFC83D;
  --otto-sunny-dark: #8A6E1E;
  --otto-sunny-tint: #FFF8E6;

  /* ---- Neutral text ramp ----------------------------------- */
  --otto-gray-900: #1B1D23;
  --otto-gray-700: #393A3D;
  --otto-gray-600: #4B4E57;
  --otto-gray-500: #8A8D96;
  --otto-gray-400: #A6A9B2;
  --otto-gray-300: #C2C5CC;
  --otto-gray-200: #E6E3DC;

  /* ---- Hairline borders (ink at low alpha) ----------------- */
  --otto-border: rgba(27,29,35,.07);
  --otto-border-strong: rgba(27,29,35,.12);
  --otto-border-faint: rgba(27,29,35,.05);
  --otto-border-on-dark: rgba(255,255,255,.14);

  /* ---- Signature gradients --------------------------------- */
  --otto-grad-sky: radial-gradient(120% 140% at 10% 0%, #3DD2FF, #18BFF7 45%, #0E8FD6 100%); /* @kind color */
  --otto-grad-violet: radial-gradient(125% 150% at 12% 0%, #6E14E0, #841BFF 46%, #1CA6FF 100%); /* @kind color */
  --otto-grad-contello: linear-gradient(110deg, #841BFF, #1CA6FF); /* @kind color */

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components
     ============================================================ */
  --bg-canvas: var(--otto-cream);
  --bg-surface: var(--otto-white);
  --bg-surface-soft: var(--otto-cream);
  --bg-dark: var(--otto-night);

  --text-strong: var(--otto-ink);
  --text-body: var(--otto-gray-600);
  --text-muted: var(--otto-gray-500);
  --text-faint: var(--otto-gray-400);
  --text-on-dark: #FFFFFF;
  --text-on-color: #FFFFFF;

  --brand-primary: var(--otto-sky);
  --brand-primary-hover: var(--otto-sky-dark);
  --accent-coral: var(--otto-coral);
  --accent-mint: var(--otto-mint);
  --accent-violet: var(--otto-violet);
  --accent-sunny: var(--otto-sunny);

  --color-success: var(--otto-mint);
  --color-success-fg: var(--otto-mint-dark);
  --color-success-bg: var(--otto-mint-tint);
}