/* ============================================================
   PROPYLON — Design System
   Estratto dal design system di Roster SD/ShiftFlow (Portfolio Style).
   Questo file è la sorgente unica del tema per tutte le tessere.

   Le tessere NON riscrivono il proprio CSS: importano questo file
   e rimappano le proprie variabili sui token --pr-* qui sotto.
   ============================================================ */

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

:root {
  /* ---- superfici ---- */
  --pr-bg: #0f0e1a;
  --pr-bg-2: #141228;
  --pr-bg-3: #1a1838;
  --pr-card: rgba(38, 33, 92, 0.25);
  --pr-card-solid: #1a1838;

  /* ---- bordi ---- */
  --pr-border: rgba(127, 119, 221, 0.2);
  --pr-border-hover: rgba(127, 119, 221, 0.45);

  /* ---- tinte ---- */
  --pr-primary: #7F77DD;
  --pr-primary-dark: #5a52b8;
  --pr-primary-light: rgba(127, 119, 221, 0.15);
  --pr-success: #5DCAA5;
  --pr-success-light: rgba(93, 202, 165, 0.15);
  --pr-warning: #F5A623;
  --pr-warning-light: rgba(245, 166, 35, 0.15);
  --pr-danger: #E05C6E;
  --pr-danger-light: rgba(224, 92, 110, 0.15);

  /* ---- testo ---- */
  --pr-text: #EEEDFE;
  --pr-text-muted: #9b97d4;
  --pr-text-light: #6b67a8;
  --pr-gray: #8884c4;

  /* ---- forma ---- */
  --pr-font: 'Inter', system-ui, -apple-system, sans-serif;
  --pr-radius-sm: 8px;
  --pr-radius: 12px;
  --pr-radius-lg: 18px;

  /* ---- profondità ---- */
  --pr-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 1px rgba(127,119,221,0.08);
  --pr-shadow-md: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 1px rgba(127,119,221,0.1);
  --pr-shadow-lg: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(127,119,221,0.15);
  --pr-glow: 0 0 24px rgba(127, 119, 221, 0.25);
  --pr-glow-success: 0 0 24px rgba(93, 202, 165, 0.25);

  /* ---- atmosfera: i due aloni che fanno il "neon" ----
     Non sono decorazione: senza questi, i glow sui bordi
     sembrano appiccicati invece che emessi dalla superficie. */
  --pr-ambient:
    radial-gradient(ellipse at 20% 20%, rgba(127,119,221,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(93,202,165,0.04) 0%, transparent 50%);

  --pr-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   TEMA CHIARO
   I glow scendono da 0.25 a 0.15: su fondo chiaro un alone
   colorato sporca invece di illuminare.
   ============================================================ */

[data-theme="light"] {
  --pr-bg: #e7e7f0;
  --pr-bg-2: #dcdce8;
  --pr-bg-3: #ffffff;
  --pr-card: rgba(255, 255, 255, 0.92);
  --pr-card-solid: #ffffff;

  --pr-border: rgba(100, 92, 170, 0.32);
  --pr-border-hover: rgba(100, 92, 170, 0.52);

  --pr-primary: #6358c4;
  --pr-primary-dark: #4e45a8;
  --pr-primary-light: rgba(99, 88, 196, 0.1);
  --pr-success: #2a9d78;
  --pr-success-light: rgba(42, 157, 120, 0.1);
  --pr-warning: #d48f1a;
  --pr-warning-light: rgba(212, 143, 26, 0.1);
  --pr-danger: #c9364a;
  --pr-danger-light: rgba(201, 54, 74, 0.1);

  --pr-text: #1a1838;
  --pr-text-muted: #4f4a7a;
  --pr-text-light: #6c6796;
  --pr-gray: #7872b0;

  --pr-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 0 0 1px rgba(100,92,170,0.06);
  --pr-shadow-md: 0 4px 16px rgba(0,0,0,0.1), 0 0 0 1px rgba(100,92,170,0.08);
  --pr-shadow-lg: 0 12px 40px rgba(0,0,0,0.12), 0 0 0 1px rgba(100,92,170,0.1);
  --pr-glow: 0 0 24px rgba(99, 88, 196, 0.15);
  --pr-glow-success: 0 0 24px rgba(42, 157, 120, 0.15);

  --pr-ambient:
    radial-gradient(ellipse at 20% 20%, rgba(99,88,196,0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(42,157,120,0.03) 0%, transparent 50%);
}

/* ============================================================
   LA TERZINA — la regola che fa il lavoro

   Ogni elemento che porta un significato usa UNA tinta su TRE
   intensità: velo al 15% dietro, tinta piena sul testo, bordo al 30%.
   Nessun elemento litiga con sé stesso, e su fondo scuro un testo
   saturo con un velo dietro sembra emettere luce.

   Uso:  <span class="pr-tag" style="--t: var(--pr-success)">approvato</span>
   ============================================================ */

.pr-tag {
  --t: var(--pr-primary);
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 3px 10px;
  border-radius: var(--pr-radius-sm);
  background: color-mix(in srgb, var(--t) 15%, transparent);
  color: var(--t);
  border: 1px solid color-mix(in srgb, var(--t) 30%, transparent);
  white-space: nowrap;
}

/* ============================================================
   BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--pr-font);
  background: var(--pr-bg);
  background-image: var(--pr-ambient);
  background-attachment: fixed;
  color: var(--pr-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--pr-primary); text-decoration: none; }
button { font-family: var(--pr-font); cursor: pointer; }
input, select, textarea { font-family: var(--pr-font); }

:focus-visible {
  outline: 2px solid var(--pr-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}