/* SMALLSURFER — extends SMALLIMG tokens with ink-primary + indigo accent */

:root {
  /* Brand accent — Indigo (diferenciación vs Bitly coral/orange); CTA/attention */
  --ss-accent: #6366F1;
  --ss-accent-hover: #4F46E5;
  --ss-accent-mid: #818CF8;
  --ss-accent-ink: #ffffff;
  --ss-accent-soft: #EEF2FF;
  --ss-accent-glow: rgba(99, 102, 241, 0.18);

  /* Secondary accent — lemon (kept quiet; indigo stays primary attention) */
  --ss-secondary: #ffe459;
  --ss-secondary-hover: #e5cd50;
  --ss-secondary-mid: #f0d24a;
  --ss-secondary-ink: #282828;
  --ss-secondary-soft: #fff6c8;
  --ss-secondary-glow: rgba(255, 228, 89, 0.2);

  /* Override shared family accent tokens for this app */
  --si-accent: var(--ss-accent);
  --si-accent-hover: var(--ss-accent-hover);
  --si-accent-mid: var(--ss-accent-mid);
  --si-accent-ink: var(--ss-accent-ink);
  --si-accent-soft: var(--ss-accent-soft);
  --si-accent-glow: var(--ss-accent-glow);
  --si-shadow-cta: 0 10px 28px rgba(40, 40, 40, 0.14);
  --si-stack-accent-face: #4F46E5;
  --si-warning-soft: var(--ss-accent-soft);
  --si-focus-ring: 0 0 0 3px var(--si-surface), 0 0 0 5px rgba(99, 102, 241, 0.4);

  /* Subtle indigo tint on cream base */
  --si-bg-glow-a: #EEF2FF;
  --si-bg-glow-b: #E0E7FF;
  --si-bg-glow-c: #E8EDFF;

  /* 3D button stack lift */
  --si-stack-lift: -2px;
  --si-stack-lift-hover: -3px;
  --si-stack-press: 3px;

  /* Brand lockup */
  --ss-logo-mark: var(--ss-accent);
  --ss-logo-word: var(--si-ink);

  /* Primary CTA — Ink (trust/stable) */
  --ss-cta-bg: #282828;
  --ss-cta-hover: #3a3a3a;
  --ss-cta-ink: #f8f3ec;
  --ss-cta-edge: transparent;
  --ss-cta-face: #1a1a1a;
  --ss-cta-glow: rgba(40, 40, 40, 0.16);
  --ss-shadow-cta: 0 1px 2px rgba(40, 40, 40, 0.06), 0 8px 24px rgba(40, 40, 40, 0.12);

  /* Accent highlights — focus rings, sparse attention */
  --ss-accent-ring: rgba(99, 102, 241, 0.42);
  --ss-focus-ring: 0 0 0 3px var(--si-surface), 0 0 0 5px var(--ss-accent-ring);

  /* QR card — high contrast for print preview */
  --ss-qr-bg: #ffffff;
  --ss-qr-ink: #282828;
  --ss-qr-border: var(--si-border-strong);

  /* Warning callout — management URL */
  --ss-warn-bg: color-mix(in srgb, var(--ss-accent) 10%, var(--si-surface));
  --ss-warn-border: color-mix(in srgb, var(--ss-accent) 35%, var(--si-border));
  --ss-warn-ink: var(--si-ink);

  /* Step flow */
  --ss-step-num-bg: var(--ss-accent);
  --ss-step-num-ink: var(--ss-accent-ink);
  --ss-step-line: color-mix(in srgb, var(--ss-accent) 28%, var(--si-border));

  /* Layout measure — exterior container vs interior card padding */
  --ss-shell-max: 60rem;
  --ss-shell-max-home: 68rem;
  --ss-gutter: 1.25rem;
  --ss-tool-max: 44rem;
  --ss-tool-auth-max: 32rem;
  --ss-card-max: 40rem;
  --ss-card-wide-max: 52rem;
  --ss-pad-x: 1.65rem;
}