/* SunTinel Design System V1 — fondations visuelles sans dépendance externe. */
:root {
  color-scheme: dark;

  /* SunTinel Shield Beacon — tokens canoniques du Brand Pack */
  --st-bg-deep: #0A0F14;
  --st-bg-panel: #111826;
  --st-bg-elevated: #1A2230;
  --st-gold: #FFC107;
  --st-orange: #FF8A00;
  --st-cyan: #00E5FF;
  --st-green: #22C55E;
  --st-violet: #A855F7;
  --st-slate: #94A3B8;
  --st-off-white: #E5E7EB;
  --st-border: rgba(148, 163, 184, 0.16);
  --st-gold-soft: rgba(255, 193, 7, 0.16);
  --st-gradient-brand: linear-gradient(90deg, #FFC107 0%, #FF8A00 100%);
  --st-shadow-beacon: 0 0 8px rgba(255, 193, 7, .55), 0 0 24px rgba(255, 193, 7, .18);

  /* Aliases historiques conservés pour les écrans existants. */
  --st-color-solar-300: var(--st-gold);
  --st-color-solar-400: var(--st-gold);
  --st-color-solar-500: var(--st-orange);
  --st-color-cyber-300: var(--st-cyan);
  --st-color-cyber-400: var(--st-cyan);
  --st-color-cyber-500: var(--st-cyan);
  --st-color-tech-300: var(--st-violet);
  --st-color-tech-400: var(--st-violet);
  --st-color-valid-400: var(--st-green);
  --st-color-alert-400: var(--st-orange);
  --st-color-danger-400: #f87171;

  /* Neutres sombres */
  --st-color-ink-950: var(--st-bg-deep);
  --st-color-ink-900: var(--st-bg-panel);
  --st-color-ink-850: var(--st-bg-panel);
  --st-color-ink-800: var(--st-bg-elevated);
  --st-color-ink-700: #1d2a40;
  --st-color-slate-400: var(--st-slate);
  --st-color-slate-300: #cbd5e1;
  --st-color-white: var(--st-off-white);

  /* Tokens sémantiques */
  --st-bg-canvas: #04060b;
  --st-bg-surface: #0b1220;
  --st-bg-surface-raised: #111b2c;
  --st-bg-surface-muted: #080f1b;
  --st-text-primary: var(--st-color-white);
  --st-text-secondary: var(--st-color-slate-300);
  --st-text-muted: var(--st-color-slate-400);
  --st-text-on-signature: #171300;
  --st-border-subtle: #1b2940;
  --st-border-default: #2d405d;
  --st-border-strong: #526987;
  --st-action-primary: var(--st-color-solar-400);
  --st-action-primary-hover: var(--st-color-solar-300);
  --st-action-secondary: var(--st-color-cyber-400);
  --st-action-secondary-hover: var(--st-color-cyber-300);
  --st-focus-ring: var(--st-color-cyber-400);
  --st-state-info: var(--st-color-cyber-400);
  --st-state-success: var(--st-color-valid-400);
  --st-state-warning: var(--st-color-alert-400);
  --st-state-danger: var(--st-color-danger-400);
  --st-state-technology: var(--st-color-tech-400);
  --st-state-info-bg: rgb(56 189 248 / 10%);
  --st-state-success-bg: rgb(52 211 153 / 10%);
  --st-state-warning-bg: rgb(251 146 60 / 11%);
  --st-state-danger-bg: rgb(248 113 113 / 10%);
  --st-state-technology-bg: rgb(167 139 250 / 10%);

  /* Typographie */
  --st-font-sans: "Sora", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --st-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --st-font-size-xs: .75rem;
  --st-font-size-sm: .875rem;
  --st-font-size-md: 1rem;
  --st-font-size-lg: 1.125rem;
  --st-font-size-xl: 1.375rem;
  --st-font-size-2xl: clamp(1.75rem, 3vw, 2.25rem);
  --st-leading-tight: 1.2;
  --st-leading-normal: 1.55;
  --st-weight-medium: 550;
  --st-weight-semibold: 650;
  --st-weight-bold: 750;

  /* Géométrie et rythme */
  --st-space-1: .25rem;
  --st-space-2: .5rem;
  --st-space-3: .75rem;
  --st-space-4: 1rem;
  --st-space-5: 1.5rem;
  --st-space-6: 2rem;
  --st-space-8: 3rem;
  --st-radius-sm: 8px;
  --st-radius-md: 10px;
  --st-radius-lg: 14px;
  --st-radius-xl: 20px;
  --st-radius-pill: 999px;
  --st-border-width: 1px;
  --st-shadow-surface: 0 18px 44px rgb(0 0 0 / 30%);
  --st-shadow-raised: 0 26px 70px rgb(0 0 0 / 42%);
  --st-shadow-inset: inset 0 1px 0 rgb(255 255 255 / 5%);
  --st-shadow-focus: 0 0 0 3px rgb(255 193 7 / 24%);
  --st-duration-fast: 140ms;
  --st-duration-normal: 220ms;

  /* Alias de compatibilité V1 */
  --color-bg: var(--st-bg-canvas);
  --color-surface: var(--st-bg-surface);
  --color-text: var(--st-text-primary);
  --color-muted: var(--st-text-muted);
  --color-border: var(--st-border-default);
  --color-primary: var(--st-action-primary);
  --color-primary-hover: var(--st-action-primary-hover);
  --color-focus: var(--st-focus-ring);
  --color-info-bg: var(--st-state-info-bg);
  --color-info-border: var(--st-state-info);
  --color-success-bg: var(--st-state-success-bg);
  --color-success-border: var(--st-state-success);
  --color-warning-bg: var(--st-state-warning-bg);
  --color-warning-border: var(--st-state-warning);
  --color-error-bg: var(--st-state-danger-bg);
  --color-error-border: var(--st-state-danger);
  --color-error-text: var(--st-state-danger);
  --font-body: var(--st-font-sans);
  --space-1: var(--st-space-1);
  --space-2: var(--st-space-2);
  --space-3: var(--st-space-4);
  --space-4: var(--st-space-5);
  --radius-sm: var(--st-radius-sm);
  --radius-md: var(--st-radius-lg);
  --shadow-surface: var(--st-shadow-surface);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--st-bg-canvas); color: var(--st-text-primary); font-family: var(--st-font-sans); }
body { background: var(--st-bg-canvas); color: var(--st-text-primary); font-size: var(--st-font-size-md); line-height: var(--st-leading-normal); }
button, input, select, textarea { font: inherit; }
h1, h2, h3, h4 { color: var(--st-text-primary); line-height: var(--st-leading-tight); }
code, pre, .monospace { font-family: var(--st-font-mono); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--st-focus-ring);
  outline-offset: 2px;
  box-shadow: var(--st-shadow-focus);
}

/* Surfaces réutilisables */
.card, .panel, .auth-card, .subpanel {
  background: var(--st-bg-surface);
  border: var(--st-border-width) solid var(--st-border-default);
  border-radius: 1rem;
  color: var(--st-text-primary);
}
.card, .panel, .auth-card { box-shadow: var(--st-shadow-surface), var(--st-shadow-inset); }
.subpanel { background: var(--st-bg-surface-muted); border-color: var(--st-border-subtle); }

/* Boutons */
.button {
  align-items: center;
  background: var(--st-action-primary);
  border: var(--st-border-width) solid var(--st-action-primary);
  border-radius: var(--st-radius-md);
  color: var(--st-text-on-signature);
  cursor: pointer;
  display: inline-flex;
  font-weight: var(--st-weight-bold);
  justify-content: center;
  min-height: 2.625rem;
  padding: var(--st-space-2) var(--st-space-4);
  letter-spacing: .01em;
  transition: background-color var(--st-duration-fast), border-color var(--st-duration-fast), box-shadow var(--st-duration-fast), transform var(--st-duration-fast);
}
.button:hover:not(:disabled) { background: var(--st-action-primary-hover); border-color: var(--st-action-primary-hover); box-shadow: 0 8px 22px rgb(250 204 21 / 16%), var(--st-shadow-inset); }
.button:active:not(:disabled) { transform: translateY(1px); }
.button:disabled { cursor: not-allowed; filter: saturate(.55); opacity: .5; }
.button:disabled::after { content: ""; }
.button.secondary { background: transparent; border-color: var(--st-border-strong); color: var(--st-action-secondary); }
.button.secondary:hover:not(:disabled) { background: var(--st-state-info-bg); border-color: var(--st-action-secondary); }
.button.danger { background: var(--st-state-danger-bg); border-color: var(--st-state-danger); color: var(--st-state-danger); }
.button.danger:hover:not(:disabled) { background: var(--st-state-danger); color: var(--st-color-ink-950); }
.button.compact { font-size: var(--st-font-size-sm); min-height: 2.25rem; padding: var(--st-space-1) var(--st-space-3); }

/* Champs */
input, select, textarea {
  background: var(--st-bg-surface-raised);
  border: var(--st-border-width) solid var(--st-border-strong);
  border-radius: .75rem;
  color: var(--st-text-primary);
  min-height: 2.75rem;
  box-shadow: var(--st-shadow-inset);
  transition: background-color var(--st-duration-fast), border-color var(--st-duration-fast), box-shadow var(--st-duration-fast), transform var(--st-duration-fast);
}
input:hover, select:hover, textarea:hover { border-color: var(--st-color-slate-400); }
input:focus, select:focus, textarea:focus { background: var(--st-color-ink-800); border-color: var(--st-action-primary); box-shadow: var(--st-shadow-focus), var(--st-shadow-inset); }
input::placeholder, textarea::placeholder { color: var(--st-text-muted); opacity: 1; }
label, legend { color: var(--st-text-secondary); font-weight: var(--st-weight-semibold); }

/* Badges */
.badge, .status-badge {
  background: var(--st-bg-surface-raised);
  border: var(--st-border-width) solid var(--st-border-strong);
  border-radius: var(--st-radius-pill);
  color: var(--st-text-secondary);
  display: inline-flex;
  font-size: var(--st-font-size-xs);
  font-weight: var(--st-weight-bold);
  letter-spacing: .02em;
  padding: var(--st-space-1) var(--st-space-3);
}
.badge.info { background: var(--st-state-info-bg); border-color: var(--st-state-info); color: var(--st-state-info); }
.badge.technology { background: var(--st-state-technology-bg); border-color: var(--st-state-technology); color: var(--st-state-technology); }
.badge.success, .status-self_attested, .status-approved { background: var(--st-state-success-bg); border-color: var(--st-state-success); color: var(--st-state-success); }
.badge.warning, .status-pending_review { background: var(--st-state-warning-bg); border-color: var(--st-state-warning); color: var(--st-state-warning); }
.badge.danger, .status-suspended, .status-expired, .status-rejected { background: var(--st-state-danger-bg); border-color: var(--st-state-danger); color: var(--st-state-danger); }

/* États et messages */
.notice, .callout {
  background: var(--st-bg-surface-raised);
  border: var(--st-border-width) solid var(--st-border-default);
  border-radius: var(--st-radius-md);
  color: var(--st-text-secondary);
  box-shadow: var(--st-shadow-inset);
}
.notice.info, .callout { background: var(--st-state-info-bg); border-color: var(--st-state-info); }
.notice.success { background: var(--st-state-success-bg); border-color: var(--st-state-success); color: var(--st-state-success); }
.notice.warning, .callout.warning { background: var(--st-state-warning-bg); border-color: var(--st-state-warning); color: var(--st-color-alert-400); }
.notice.error { background: var(--st-state-danger-bg); border-color: var(--st-state-danger); color: var(--st-state-danger); }
.loading-state { color: var(--st-text-muted); }
.loading-state::before {
  animation: st-pulse 1.1s ease-in-out infinite alternate;
  background: var(--st-action-primary);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: .5rem;
  margin-right: var(--st-space-2);
  width: .5rem;
}

.muted { color: var(--st-text-muted); }

@keyframes st-pulse { to { opacity: .25; transform: scale(.78); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; }
  .loading-state::before { animation: none; }
}