/* SigueTu visual roles. Brand assets, photos, QR and provider UI keep their own colors. */
:root {
  color-scheme: dark;

  /* SigueTú design tokens: shared spacing scale and soft corner roles. */
  --ds-space-0: 0px;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-4: 16px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-radius-sm: 4px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 22px;
  --ds-radius-xl: 26px;
  --ds-radius-pill: 9999px;
  --ds-radius-circle: 50%;
  --surface-bg: var(--st-surface-card);
  --border-color: var(--st-border-card);
  --radius-container: var(--ds-radius-xl);
  --surface-shadow: none;
  --ds-page-max: 1024px;
  --ds-content-max: 768px;
  --ds-form-max: 640px;
  --ds-gutter-mobile: 16px;
  --ds-gutter-tablet: 24px;
  --ds-gutter-desktop: 32px;
  --ds-control-height: 48px;
  --ds-control-height-compact: 44px;
  --ds-control-text: 16px;
  --ds-border-width: 1px;
  --ds-focus-width: 2px;
  --ds-avatar-sm: 32px;
  --ds-avatar-md: 40px;
  --ds-avatar-lg: 48px;
  --ds-avatar-xl: 64px;
  --ds-font-micro: 12px;
  --ds-font-auxiliary: 14px;
  --ds-font-body: 16px;
  --ds-font-section: 20px;
  --ds-font-view-title: 24px;
  --ds-font-display: 32px;
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 650;
  --ds-weight-bold: 750;
  --ds-leading-tight: 1;
  --ds-leading-body: 1.5;
  --ds-leading-auxiliary: 20px;
  --ds-motion-fast: 180ms;
  --ds-motion-standard: 240ms;
  --ds-motion-skeleton: 1450ms;
  --ds-icon-sm: 16px;
  --ds-icon-md: 20px;

  /* Atoms consume these aliases only; semantic colors remain centralized below. */
  --ds-color-text: var(--st-text);
  --ds-color-muted: var(--st-text-secondary);
  --ds-color-primary: var(--st-brand);
  --ds-color-primary-hover: var(--st-brand-hover);
  --ds-color-danger: var(--st-danger);
  --ds-color-border: var(--st-border-control);
  --ds-color-canvas: var(--st-canvas);
  --ds-color-surface: var(--st-surface-elevated);
  --ds-color-success-surface: var(--st-control-selected);
  --ds-color-warning: var(--st-warning);
  --ds-color-warning-surface: var(--st-reason-surface);
  --ds-color-danger-surface: var(--st-no-show-fill);
  --ds-color-info: var(--st-info);
  --ds-color-info-surface: rgba(10, 132, 255, 0.12);

  /* DA-36 color map: canvas #050608 and obsidian #0B0D13 remain exact. */
  --st-canvas: #050608;
  --st-obsidian: #0B0D13;
  --st-text: #F4F7F5;
  --st-text-secondary: #AAB8B1;
  --st-brand: #4EDEA3;
  --st-success: var(--st-brand);
  --st-warning: #FEB95D;
  --st-warning-dark: #E0A04F;
  --st-info: #0A84FF;
  --st-danger: #FFB4AB;

  /* Normal translucent surfaces; opaque values below are conditional fallbacks. */
  --st-surface-card: rgba(27, 31, 38, 0.82);
  --st-surface-elevated: var(--st-surface-card);
  --st-surface-subtle: rgba(255, 255, 255, 0.03);
  --st-surface-glass: rgba(255, 255, 255, 0.06);
  --st-surface-glass-hover: rgba(255, 255, 255, 0.10);
  --st-surface-obsidian-glass: linear-gradient(
    135deg,
    rgba(25, 30, 40, 0.75) 0%,
    rgba(12, 15, 22, 0.88) 100%
  );
  --st-surface-obsidian-glass-backdrop: blur(28px) saturate(190%);
  --st-surface-hero-paused: radial-gradient(
    120% 90% at 85% 0%,
    rgba(255, 159, 10, 0.13) 0%,
    rgba(15, 20, 26, 0.85) 55%,
    rgba(10, 12, 18, 0.95) 100%
  );
  --st-surface-hero-paused-backdrop: blur(32px);

  /* DA-36 decorative borders (1px) stay distinct from required control edges and focus. */
  --st-border-separator: rgba(255, 255, 255, 0.08);
  --st-border-obsidian-glass: rgba(255, 255, 255, 0.09);
  --st-border-card: rgba(255, 255, 255, 0.10);
  --st-border-card-hover: rgba(255, 255, 255, 0.15);
  --st-border-inset: rgba(255, 255, 255, 0.05);
  --st-border-control: #3D4A45;
  --st-border-hero-paused: rgba(255, 175, 50, 0.22);
  --st-border-reason: rgba(245, 158, 11, 0.20);
  --st-focus-ring: var(--st-brand);
  --st-focus-separator: #050608;

  /* State fills preserve their semantics; danger remains red and no age is synthesized. */
  --st-no-show: #F53048;
  --st-no-show-fill: #3A141E;
  --st-no-show-border: #B02A40;
  --st-reason-surface: rgba(245, 158, 11, 0.10);

  /* Selective gradients and reliefs: no generic card/control shadow. */
  --st-gradient-cta-recovery: linear-gradient(90deg, #FBBF24 0%, #F59E0B 50%, #FBBF24 100%);
  --st-gradient-cta-recovery-size: 200% auto;
  --st-shadow-obsidian-glass: inset 0 1px 1px 0 rgba(255, 255, 255, 0.12);
  --st-shadow-hero: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), 0 16px 32px -8px rgba(0, 0, 0, 0.65);
  --st-shadow-cta-recovery: 0 12px 30px -4px rgba(255, 159, 10, 0.28), 0 4px 12px rgba(255, 159, 10, 0.15);

  /* Semantic radius roles: 22px controls, 26px surfaces, 8px inset, 4px details. */
  --st-radius-hero: var(--ds-radius-xl);
  --st-radius-card: var(--ds-radius-xl);
  --st-radius-control: var(--ds-radius-lg);
  --st-radius-inset: var(--ds-radius-md);
  --st-radius-indicator: var(--ds-radius-sm);
  --st-radius-ticket: var(--ds-radius-lg);
  --st-radius-pill: var(--ds-radius-pill);
  --st-radius-circle: var(--ds-radius-circle);

  /* Shared lower navigation: one top rule, square corners, no card shadow. */
  --st-tabbar-background: rgba(10, 13, 18, 0.82);
  --st-tabbar-backdrop: blur(30px) saturate(210%);
  --st-tabbar-border-top: 1px solid rgba(255, 255, 255, 0.08);
  --st-tabbar-border-inline: 0;
  --st-tabbar-border-bottom: 0;
  --st-tabbar-radius: 0;
  --st-tabbar-active: var(--st-brand);
  --st-tabbar-shadow: none;

  /* Role-preserving solid fallbacks, activated only when transparency is unavailable/reduced. */
  --st-fallback-card: #1B1F26;
  --st-fallback-subtle: #0B0D13;
  --st-fallback-glass: #0B0D13;
  --st-fallback-glass-hover: #171B22;
  --st-fallback-obsidian-glass: #0B0D13;
  --st-fallback-hero-paused: #171B22;
  --st-fallback-tabbar: #0A0D12;

  /* Progressive state colors keep solid sRGB values where color-mix is unavailable. */
  --st-brand-hover: #35CF91;
  --st-brand-active: #35CF91;
  --st-warning-hover: #FFC56F;
  --st-warning-active: #E0A04F;
  --st-control-hover: var(--st-surface-elevated);
  --st-control-selected: #1A3332;
  --st-control-disabled: var(--st-surface-elevated);
  --st-control-disabled-text: var(--st-text-secondary);

  /* Compatibility aliases resolve to a single source and keep hero/focus roles separate. */
  --color-obsidian: var(--st-obsidian);
  --color-surface: var(--st-surface-card);
  --color-panel: var(--st-surface-elevated);
  --color-panel-high: var(--st-control-selected);
  --color-ink: var(--st-text);
  --color-muted: var(--st-text-secondary);
  --color-line: var(--st-border-separator);
  --color-primary: var(--st-brand);
  --color-primary-strong: var(--st-brand-active);
  --color-success: var(--st-success);
  --color-amber: var(--st-warning);
  --color-amber-dark: var(--st-warning-dark);
  --color-info: var(--st-info);
  --color-danger: var(--st-danger);
  --field-border: var(--st-border-control);
  --field-border-hover: var(--st-border-control);
  --field-border-focus: var(--st-focus-ring);
  --field-surface: var(--st-obsidian);
  --field-surface-focus: var(--st-surface-elevated);
  --radius-surface: var(--st-radius-card);
  --radius-hero: var(--st-radius-hero);
  --radius-control: var(--st-radius-control);
  --radius-header-control: var(--st-radius-control);
}

@supports (color: color-mix(in srgb, black, white)) {
  :root {
    --st-brand-hover: #35CF91;
    --st-brand-active: #35CF91;
    --st-warning-hover: color-mix(in srgb, var(--st-warning) 92%, var(--st-text) 8%);
    --st-warning-active: color-mix(in srgb, var(--st-warning) 88%, var(--st-canvas) 12%);
    --st-control-selected: color-mix(in srgb, var(--st-surface-elevated) 88%, var(--st-brand) 12%);
    --st-no-show-fill: color-mix(in srgb, var(--st-no-show) 20%, var(--st-obsidian) 80%);
  }
}

@supports not (backdrop-filter: blur(1px)) {
  :root {
    --st-surface-obsidian-glass: var(--st-fallback-obsidian-glass);
    --st-surface-obsidian-glass-backdrop: none;
    --st-surface-hero-paused: var(--st-fallback-hero-paused);
    --st-surface-hero-paused-backdrop: none;
    --st-tabbar-background: var(--st-fallback-tabbar);
    --st-tabbar-backdrop: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --st-surface-card: var(--st-fallback-card);
    --st-surface-subtle: var(--st-fallback-subtle);
    --st-surface-glass: var(--st-fallback-glass);
    --st-surface-glass-hover: var(--st-fallback-glass-hover);
    --st-surface-obsidian-glass: var(--st-fallback-obsidian-glass);
    --st-surface-obsidian-glass-backdrop: none;
    --st-surface-hero-paused: var(--st-fallback-hero-paused);
    --st-surface-hero-paused-backdrop: none;
    --st-reason-surface: var(--st-fallback-card);
    --st-tabbar-background: var(--st-fallback-tabbar);
    --st-tabbar-backdrop: none;
  }
}

/* No motion is defined here; consumers must honor reduced motion before adding decoration. */