/* =============================================================
   MyJourney -- Design Tokens
   Fonte unica di verita per colori, tipografia, spacing.
   Importato da tutti i CSS dell'app e della landing.
   ============================================================= */

/* --- FONT ----------------------------------------------------
   Plus Jakarta Sans -- geometrico, sportivo, leggibile.
   Import in ogni layout PHP via <link> Google Fonts.
   ------------------------------------------------------------ */

:root {
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Scale tipografica */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  42px;
  --text-4xl:  56px;
  --text-5xl:  72px;

  /* Pesi */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-extrabold:800;

  /* Line height */
  --leading-tight:  1.05;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* Letter spacing */
  --tracking-tight: -0.03em;
  --tracking-base:  -0.01em;
  --tracking-wide:  0.05em;
  --tracking-wider: 0.1em;
}

/* --- COLORI INVARIANTI ---------------------------------------
   Accent e stati -- uguali su dark e light.
   ------------------------------------------------------------ */
:root {
  /* Accent principale -- verde acido */
  --accent:         #C8F04A;
  --accent-hover:   #B8DF3A;
  --accent-muted:   rgba(200, 240, 74, 0.10);
  --accent-border:  rgba(200, 240, 74, 0.20);

  /* Stato: danger */
  --danger:         #FF4D4D;
  --danger-hover:   #E63D3D;
  --danger-muted:   rgba(255, 77, 77, 0.10);
  --danger-border:  rgba(255, 77, 77, 0.20);

  /* Stato: success */
  --success:        #22C55E;
  --success-muted:  rgba(34, 197, 94, 0.10);

  /* Stato: warning */
  --warning:        #F59E0B;
  --warning-muted:  rgba(245, 158, 11, 0.10);

  /* RPE scale */
  --rpe-low:    #22C55E;
  --rpe-mid:    #F59E0B;
  --rpe-high:   #FF4D4D;
}

/* --- TEMA SCURO (default) ------------------------------------
   Attivato da: [data-theme="dark"] o assenza di attributo.
   ------------------------------------------------------------ */
:root,
[data-theme="dark"] {
  --bg:          #0F0F0F;
  --bg-elevated: #141414;
  --surface:     #1A1A1A;
  --surface-2:   #222222;
  --surface-3:   #2A2A2A;

  --border:      rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);

  --text-1:      #F0EEEA;
  --text-2:      #888888;
  --text-3:      #555555;
  --text-inverse:#111111;

  --overlay:     rgba(0, 0, 0, 0.6);

  /* Focus ring */
  --focus-ring:  0 0 0 3px rgba(200, 240, 74, 0.35);

  /* Scrollbar */
  --scrollbar-thumb: #333;
  --scrollbar-track: #1a1a1a;
}

/* --- TEMA CHIARO ---------------------------------------------
   Attivato da: [data-theme="light"]
   ------------------------------------------------------------ */
[data-theme="light"] {
  --bg:          #F4F4F0;
  --bg-elevated: #FAFAF8;
  --surface:     #FFFFFF;
  --surface-2:   #EBEBEB;
  --surface-3:   #E0E0DC;

  --border:      rgba(0, 0, 0, 0.07);
  --border-strong: rgba(0, 0, 0, 0.14);

  --text-1:      #111111;
  --text-2:      #666666;
  --text-3:      #AAAAAA;
  --text-inverse:#F0EEEA;

  --overlay:     rgba(0, 0, 0, 0.4);

  --focus-ring:  0 0 0 3px rgba(200, 240, 74, 0.4);

  --scrollbar-thumb: #ccc;
  --scrollbar-track: #e8e8e4;

  /* Sul tema chiaro l'accent come testo e' troppo fluorescente.
     Usiamo un verde piu' scuro e leggibile (rapporto contrasto > 4.5:1 su bianco). */
  --accent:         #5a7a00;
  --accent-hover:   #4a6600;
  --accent-muted:   rgba(90, 122, 0, 0.08);
  --accent-border:  rgba(90, 122, 0, 0.20);
}

/* --- SPACING -------------------------------------------------
   Scala 4px base.
   ------------------------------------------------------------ */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
}

/* --- BORDER RADIUS -------------------------------------------  */
:root {
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;
}

/* --- SHADOWS -------------------------------------------------  */
:root {
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
}

/* --- TRANSIZIONI ---------------------------------------------  */
:root {
  --transition-fast:   0.12s ease;
  --transition-base:   0.2s ease;
  --transition-slow:   0.35s ease;
}

/* --- LAYOUT --------------------------------------------------  */
:root {
  --nav-height:     60px;
  --sidebar-width:  240px;
  --content-max:    1100px;
  --content-pad:    clamp(16px, 4vw, 40px);
}

/* --- Z-INDEX SCALE -------------------------------------------  */
:root {
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
}